Canvas学习Part2 - strokeStyle 属性

strokeStyle 属性 

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

基本用法 

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeStyle="#F69";
ctx.strokeRect(10,10,200,200);
</script>

渐变边框

<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,170);
gradient.addColorStop("0","#009FFF");
gradient.addColorStop("0.7","#ec2F4B");
gradient.addColorStop("1.0","#ffd452");
//渐变填充
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(10,10,200,200);
</script>

文字渐变

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
// 创建渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","#009FFF");
gradient.addColorStop("0.7","#ec2F4B");
gradient.addColorStop("1.0","#ffd452");
// 渐变填充
ctx.strokeStyle=gradient;
ctx.strokeText("HELLOW WORLD!",10,50);
</script>