Canvas中的鼠标操作

　　同样，在canvas中可以有相关的鼠标操作，比如可以返回当前鼠标所在的坐标位置，如下面的代码：

　　在上面的代码中，捕捉了鼠标的移动的事件，当移动时，显示了移动轨迹的X和Y坐标。下面的代码中则更进一步，它能让用户在画布上自由移动鼠标进行涂鸦绘画：

　　实际运行的效果见：

　　 小结

　　本文概要介绍了HTML 5中功能强大的canvas及其相关主要绘图方法，让开发者对canvas有了概要的认识。HTML 5中的canvas功能十分强大，足以在某些方面跟Flash抗衡，相信随着HTML5的继续发展，canvas的功能将更为强大。

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

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

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

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

　　下面讲解如何在canvas中绘画文字。绘画文字有如下方法：

　　font [ = value ] 设置字体，跟CSS中设置字体一样

　　textAlign [ = value ] 设置文字的位置方向，可以设置为start, end, left, right, 和center

　　textBaseline [ = value ] 文字竖直对齐方式。可取属性值：top, hanging, middle,alphabetic, ideographic，更详细的关于textBaseline属性介绍，请参考。

　　fillText(text, x, y [, maxWidth ] ) 在指定的坐标上填充文字

　　strokeText(text, x, y [, maxWidth ] ) –在指定的坐标上用勾画文字

　　下面是一个例子：

　　结果为：
 

▲

　　如果要绘制透明的话，可以这样通过fillStyle指定

　　下图是效果
 

▲

　　假如要在加点阴影效果的话也是十分容易的，可以使用shadow对象即可：

▲

       图片和视频
       下面介绍下如何在canvas中绘制图片和处理视频相关。一个问题是为什么不用传统的<img>标签呢?原因是如果结合canvas使用的话，可以充分利用canvas各类API的强大功能做出很眩的效果。下面是在canvas画布上，直接把一张图片绘画在上面了，使用的是drawImage方法：

　　一旦图片跟canvas结合了，就可以做各类的动画变换等效果了。

　　同样，要将video结合canvas使用的话，首先要创建HTM5中的标签元素，关于HTML5的新的标签，可以参考下文去详细学习。下面代码中并没将video标签嵌入到canvas画布中：

　　然后我们写一个简单的脚本，实现的功能是将video标签嵌入到画布中，

　　实现的效果是在屏幕中显示一个video播放器，播放一段动画，而同时画布的背景也是同步这段动画。具体的效果请看这个地址：

　　形状变化和动画

　　形状变化和动画是canvas中十分重要的部分。下面是关于形状变化中的重要的方法：

　　scale(x, y) 大小缩放， x是水平方向的缩放因子，y是垂直方向的缩放因子，必须都为正数

　　rotate(angle) 旋转，angle是旋转的角度，旋转的中心是canvas坐标原点

　　translate(x, y) 移动canvas坐标

　　transform(m11, m12, m21, m22, dx, dy)：这个方法必须将当前的变形矩阵乘上下面的矩阵：

　　m11 m21 dx

　　m12 m22 dy

　　0 0 1

　　setTransform(m11, m12, m21, m22, dx, dy) :这个方法重置当前的变形矩阵为单位矩阵，然后以相同的参数调用 transform 方法。如果任意一个参数是无限大，那么变形矩阵也必须被标记为无限大，否则会抛出异常。

　　将以上的变换整合起来使用的话，会制作出很多很漂亮的效果，比如下面的代码中，效果是每隔250微秒绘制一个矩形，并且矩形是会旋转的，颜色也是随机生成的。　　

　　下面是静态效果图，动态效果图请看这个地址：