html5 之 canvas 相关知识(三)API-strokeStyle-shadow相关

context.strokeStyle=color|gradient|pattern;//指示绘图填充色的CSS颜色值|用于填充绘图的渐变对象线性或放射性|用于填充绘图的 pattern 对象

<canvas id="canvas" width=300 height=150></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(100,0,200,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 用渐变进行填充
ctx.strokeStyle=gradient;
ctx.lineWidth=10;
ctx.strokeRect(100,25,100,100);   
</script>

<canvas id="canvas" width=300 height=150></canvas>
<script>
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.font="30px arial";
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // 用渐变进行填充
    ctx.strokeStyle=gradient;
    ctx.strokeText("canvas example",40,80);
</script>

context.shadowColor=color;
context.shadowBlur=number;
context.shadowOffsetX=number;
context.shadowOffsetY=number;

<canvas id="canvas" width=300 height=150></canvas>
<script>
    var myCanvas = document.getElementById("canvas");
    var cc = myCanvas.getContext("2d");
    cc.fillStyle = "#ff0000";
    cc.shadowBlur=30;
    cc.shadowColor="#ff0000";
    cc.fillRect(100,25,100,100);//四个参数分别对应：x,y,w,h
</script>

<canvas id="canvas" width=300 height=150></canvas>
<script>
    var myCanvas = document.getElementById("canvas");
    var cc = myCanvas.getContext("2d");
    cc.fillStyle = "#ff0000";
    cc.shadowBlur=30;
    cc.shadowOffsetX=15;
    cc.shadowOffsetY=15;
    cc.shadowColor="#ff0000";
    cc.fillRect(100,25,100,100);//四个参数分别对应：x,y,w,h
</script>