笔触颜色是一个非常自然的颜色，这样的颜色不但能够让网站更美观也能够让网站浏览起来更大气，下面汇仁智杰网站建设就通过案例来给大家讲解怎么通过HTML5来设置笔触的颜色。

　　绘制一个矩形。请用蓝色的笔触颜色：

　　实例 1

　　绘制一个矩形。使用渐变笔触：

　　JavaScript:

　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");

　　var gradient=ctx.createLinearGradient(0,0,170,0);
　　gradient.addColorStop("0","magenta");
　　gradient.addColorStop("0.5","blue");
　　gradient.addColorStop("1.0","red");

　　// 用渐变进行填充
　　ctx.strokeStyle=gradient;
　　ctx.lineWidth=5;
　　ctx.strokeRect(20,20,150,100);

　　JavaScript:

　　var c=document.getElementById("myCanvas");
　　var ctx=c.getContext("2d");
　　ctx.strokeStyle="#0000ff";
　　ctx.strokeRect(20,20,150,100);

　　浏览器支持

　　Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 strokeStyle 属性。

　　注释：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

　　HTML5就是这样能够给你带来很多魔幻的效果，爱上了HTML5了吧，一点一点的来了解HTML5吧。