HTML5实践之Canvas线条

    在HTML5中，其中最令开发者和用户值得留意的新特性，莫过于Canvas的功能了，它能在目前的IE 9，IE 10以及Chrome,FireFox等多种浏览器中使用，是目前HTML5中富客户端动画效果的实现方式，有了它，HTML5就有了跟Adobe Flash对抗的资本，用户以后只要使用支持HTML5的浏览器，就可以不用安装Flash插件了。本文学习下HTML5中的线条、文本及阴影效果。

    首先介绍的是线条，有如下的方法控制线条的相关属性：

　　lineWidth [ = value ] 设置线条的宽度

　　lineCap [ = value ] lineCap 属性指定线段如何结束。只有绘制较宽线段时，它才有效。可以有三个cap样式之一：对接、圆、方。除另有规定外，默认为对接。例子如下图：

 

▲

　　lineJoin [ = value ] 设置路径的风格，路径可以有一个三线连接：尖角，圆角或斜角。如下图：

 

▲

　　在画线时，可以调用moveTo和lineTo方法，它们接受传入X和Y坐标，以决定从哪里开始画线条，也可以同时设置lineWidth来设置线条宽度，最后调用stroke笔触去画线条。下面是一个例子：

for (i = 15; i > 0; i–) {
　　context.strokeStyle = “blue”;
　　context.lineWidth = i;
　　context.beginPath();
　　context.moveTo(55, 15 + (15 – i) * 24);
　　context.lineTo(335, 15 + (15 – i) * 24);
　　context.stroke();
　　}

　　效果是一个从粗到细的线条渐变，如下图

 

▲

　　我们可以再设置线条两端的样式lineCap，比如

context.lineCap = “round”;

　　则可以看到出现如下图的圆角效果图：

 

转自：IT168