fillStyle 屬性設(shè)置或返回用于填充繪畫的顏色、漸變或樣式

fillStyle

var c = document.getElementById('mycanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#00f";
ctx.fillRect(20,20,150,100);

strokeStyle 屬性設(shè)置或返回用于筆觸的顏色、漸變或模式。

strokeStyle

    var c2 = document.getElementById('mycanvas2');
    var ctx2 = c2.getContext("2d");
    ctx2.beginPath();
    ctx2.strokeStyle="#00f";
    ctx2.strokeRect(20,20,150,100);

shadowBlur 屬性設(shè)置或返回陰影的模糊級(jí)數(shù) -- number

shadowColor 屬性設(shè)置或返回用于陰影的顏色.默認(rèn)值為#000;

shadowBlur和shadowColor

    var c3 = document.getElementById("mycanvas3");
    var ctx3 = c3.getContext("2d");
    ctx3.shadowBlur= 20 ;
    ctx3.shadowColor="black";
    ctx3.fillStyle = "#00f";
    ctx3.fillRect(20,20,150,100);

shadowOffsetX設(shè)置或返回陰影距形狀的水平距離 -- number

shadowOffsetY設(shè)置或返回陰影距形狀的垂直距離 -- number

shadowOffsetX和shadowOffsetY

    var c4 = document.getElementById("mycanvas4");
    var ctx4 = c4.getContext('2d');
    ctx4.shadowBlur = 10;
    ctx4.shadowOffsetX = 20;
    ctx4.shadowOffsetY = -20;
    ctx4.shadowColor = "black";
    ctx4.fillStyle = "#00f";
    ctx4.fillRect(20,20,150,100);