当前位置:澳门新葡亰亚洲在线 > 计算机前端 > HTML5新特性开发者实践之Canvas线条篇

HTML5新特性开发者实践之Canvas线条篇

文章作者:计算机前端 上传时间:2019-05-30

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

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

  同样,要将video结合canvas使用的线中的标签元素,关于HTML5的新的标签,可以参考下文去详细学习。下面代码中并没将video标签嵌入到canvas画布中:

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

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

  scale(x, y) 大小缩放, x是水平方向的缩放因子,y是垂直方向的缩放因子,必须都为正数rotate(angle) 旋转,angle是旋转的角度,旋转的中心是canvas坐标原点

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

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

  再看一个尺寸变换的例子,依然是上面的例子,只不过改成如下代码,实现的效果是每一秒进行尺寸变换:

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

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

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

转载请注明来源:HTML5新特性开发者实践之Canvas线条篇