html5 垂直线,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笔触去画线条。下面是一个例子：

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

▲

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

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