Canvas小结（canvas-颜色样式和阴影）

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或样式

fillStyle

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

strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

strokeStyle

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

shadowBlur 属性设置或返回阴影的模糊级数 -- number

shadowColor 属性设置或返回用于阴影的颜色.默认值为#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设置或返回阴影距形状的水平距离 -- number

shadowOffsetY设置或返回阴影距形状的垂直距离 -- 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);