【IT168专稿】在HTML5中，其中最令开发者和用户值得留意的新特性，莫过于Canvas的功能了，它能在目前的IE 9，IE 10以及Chrome,FireFox等多种浏览器中使用，是目前HTML5中富客户端动画效果的实现方式，有了它，HTML5就有了跟Adobe Flash对抗的资本，用户以后只要使用支持HTML5的浏览器，就可以不用安装Flash插件了。在上篇《开发者值得关注的HTML5新特性Canvas》中，我们主要讲解了HTML 5中的Canvas功能的硬件加速以及绘制图形方面的功能，本篇我们学习下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();
}
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”;
则可以看到出现如下图的圆角效果图：
▲
