js画布组件(canvas/canvas)(2)_H5之家 - 中国HTML5教程资源分享第一站

var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(150,50); ctx.lineTo(20,100); var grd = ctx.createLinearGradient(0,0,170,0); //定义线性渐变对象，设定渐变线起始点和结束点坐标，坐标格式为(起始点x,起始点y,结束点x,结束点y) grd.addColorStop(0,"black"); //定义渐变线起点颜色 grd.addColorStop(0.5,"red"); //定义渐变线中间点的颜色 grd.addColorStop(1,"yellow"); //定义渐变线结束点的颜色 ctx.strokeStyle = grd; //将渐变对象赋值给strokeStyle ctx.stroke(); //描边

效果如下：

技术分享

这里我们提到了一个概念叫“渐变线”，没有玩过设计的朋友需要了解下渐变的知识点，我们可以把LinearGradient（线性渐变，另有放射状/圆形渐变RadialGradient）范围看成一个矩形（你可以通过Illustator、Photoshop等专业设计软件来辅助你理解这点）：

技术分享

我们一开始定义线性渐变对象的代码 var grd = ctx.createLinearGradient(0,0,170,0) 不外乎就是设定了线性渐变线起始点为(0,0)，结束点为(170,0)。

紧接着我们通过 addColorStop( 渐变线位置<0~1>, 颜色 ) 来设定了渐变色值，分别在渐变线0、0.5、1的位置设置了黑色、红色、黄色，其渐变效果如下：

技术分享

通过 ctx.strokeStyle = grd 将渐变赋值给描边方法，最终描边得到了我们想要的渐变效果。

⑶ 最后看看pattern描边方式，strokeStyle之所以不叫strokeColor是因为它除了支持颜色描边还支持图案描边（搞设计的朋友或许称作笔触描边会更有feel）。

线性渐变描边需要先createLinerGradient(xstart,ystart,xend,yend)，那么设置图案描边自然也要先新建一个canvasPattern对象：

createPattern(image, repetitionStyle)

其中参数 image 代表图案对象，一般通过 document.createElement(‘img‘) 或者 new Image() ，再定义其src值来创建该对象。
而repetitionStyle参数很好理解，即图案重复形式，其可选值有"repeat" 、"repeat-x"、"repeat-y" 和"no-repeat" （和css的background-repeat可选值一样，不赘述）。

那我们可以试着这样写：

<body> <canvas> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); pic = new Image(); //创建图片对象，或者 pic = document.createElement(‘img‘) pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; redTexture = ctx.createPattern(pic, "repeat"); //定义Pattern对象，设定填充图案为pic图片，填充形式为平铺 ctx.strokeStyle = redTexture; //定义描边样式为上一行设定的Pattern描边 ctx.moveTo(80,10); ctx.lineTo(10,90); ctx.stroke(); </script>

只是在执行效果的时候会发现，执行十次有九次不是我们预期的图片填充效果，而是默认的黑色描边效果，这是为何？

原因在于浏览器可能还未加载完图片pic，就已经执行了ctx.stroke()，解决方法是让ctx在图片pic加载完毕之后才开始执行绘图：

<canvas> 您的浏览器不支持canvas，建议使用最新版的Chrome </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); pic = new Image(); //创建图片对象，或者 pic = document.createElement(‘img‘) pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o_5.jpg"; pic.onload = patternFill; patternFill() { redTexture = ctx.createPattern(pic, "repeat"); ctx.strokeStyle = redTexture; ctx.moveTo(80,10); ctx.lineTo(10,90); ctx.lineWidth = 8; //定义线段粗度为8像素 ctx.stroke(); } </script>

效果如下：

技术分享

注意这里我还加了个 ctx.lineWidth = 8 来设定线段的粗度。

自此我们学习了strokeStyle的三个赋值方式，也学习了上述的通过 ctx.lineWidth = lineWeight 的形式来给线段设定粗度。

最后咱们再学习两个很简单的线段属性 lineCap 和 lineJoin。

⑴ lineCap是设定线段端点的形状（线帽），其值可以是

butt 默认，即线条端点为平直的边缘
round 线条端点为圆角线帽
square 为线条端点添加正方形线帽

<canvas> </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.beginPath(); ctx.lineCap="butt"; ctx.moveTo(20,10); ctx.lineTo(200,60); ctx.strokeStyle="red"; ctx.stroke(); ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(30,90); ctx.lineTo(200,40); ctx.strokeStyle="blue"; ctx.stroke(); ctx.beginPath(); ctx.lineCap="square"; ctx.moveTo(10,30); ctx.lineTo(200,80); ctx.strokeStyle="green"; ctx.stroke(); </script>