与 SVG 类似，HTML5 canvas 也支持引入图像，这会提供一个非常有趣的功能就是可以利用矢量绘图和图像引用来进行图像合成。清单 7 所示的就是用一个坐标图作为背景，在上面完成曲线绘制，图 7 是在 Firefox3 上运行的结果。
清单 7. 引入图像的 HTML5 canvas 绘图<html> <head> <script> window.onload = function() { var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); } img.src = 'coordinate.png'; } </script> </head> <body> <canvas></canvas> </body> </html>
图 8. HTM5 canvas 绘制的坐标曲线
HTML5 的 canvas 提供通过绘图上下文的属性来设定图形的颜色和式样，如通过 fillStyle 设定图形的填充颜色，通过 strokeStyle 设定图形轮廓的颜色，通过 globalAlpha 来设置全局透明度，通过 lineWidth 来设置线条宽度等。如在清单 7 的代码中加入颜色设定，就可以画出有颜色的曲线，如清单 8 所示。
清单 8. 为坐标曲线加入颜色设定img.onload = function(){ ctx.drawImage(img,0,0); // 颜色设定 ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.beginPath(); ctx.moveTo(30,96); ctx.lineTo(70,66); ctx.lineTo(103,76); ctx.lineTo(170,15); ctx.stroke(); }
除了上面介绍的绘制图形、引入图像和颜色式样设定，HTML5 的 canvas 上的矢量绘图还包括变形、组合等高级特性，这里就不再详述。
如前所述，SVG 和 VML 都是通过 XML 来描述图形对象的，每一个图形对象都会对应一定的 DOM 树节点，所以可以将事件处理直接绑定在图形节点上。而 HTML canvas 是画布的机制，除了正方形外，其余的图形要通过画线来完成，这就不能采取类似 SVG 和 VML 中 DOM 节点的那种直接的绑定方式。在 HTML5 的 canvas 上如果想为某个图形绑定一个鼠标点击事件，需要在鼠标事件的回调函数中计算鼠标点击的位置和图形的范围，如果鼠标事件落在了目标图形内，则调用图形的鼠标点击事件处理函数。所以，相比 SVG、XML，HTML5 canvas 在事件处理上并没有提供高级封装。当然，随着 HTML5 canvas 的普及和发展，会有基于 HTML5 矢量绘图的工具库出现，帮助实现一定的封装，提供一些高级的事件绑定功能。
HTML5 的 canvas 是可以实现动画功能的，所以当前流行着一种说法是 HTML5 canvas 终将取代 Adobe 的 Flash 技术而成为未来动画技术的标准。这两者未来谁将成为主导不是本文的关注点，但有一点要注意的是 HTML5 并不像 Flash 那样专门为动画而设计。在对动画功能的支持上，Flash 针对动画的一些功能设计比当前的 HTML5 先进；在动画的运行环境上，Flash 是在 Flash 播放器上运行，HTML5 canvas 是在浏览器上运行，前者理应更稳定更高效；在动画的实现机制上，两者是相同的，都是定时的刷新重绘。所以要利用 HTML5 canvas 实现动画效果，一方面要利用其做到刷新和重绘，同时还要使用 JavaScript 中的定时器。清单 9 给出了利用 HTML5 的 canvas 实现的动画。在其中我们设置了一个定时器，定期的清空原来画布上的内容，然后重新绘制。
清单 9. 利用 HTML5 canvas 和 Javascipt 定时器实现的动画<html> <head> <script> window.onload = function() { var dx = -1; var dy = 0; var x = 125; var y = 125; setInterval(function(){ var canvas = document.getElementById('canvas1'); var ctx = canvas.getContext('2d'); ctx.clearRect(0,0,600,600); ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.strokeStyle = 'rgb(255, 0, 0)'; ctx.fillRect(25,25,100,100); ctx.clearRect(45,45,60,60); ctx.strokeRect(50,50,50,50); ctx.fillStyle = 'rgb(0, 0, 255)'; ctx.strokeStyle = 'rgb(0, 0, 255)'; ctx.beginPath(); x += dx; y += dy; ctx.moveTo(x,y); ctx.lineTo(x + 80, y); ctx.lineTo(x, y + 80); ctx.fill(); if(x == 25 ) { dx = 1; } if(y == 25) { dy = 1; } if(x == 125 && y == 125) { if(dx == 1) { dy = -1 dx = 0; } if(dy == 1) { dx = -1; dy = 0; } } },50); } </script> </head> <body> <canvas> </canvas> </body> </html>
在本小节中我们介绍了 HTML5 canvas 矢量绘图的一些基本概念、常用 API、动态交互以及动画效果的实现，相比较 SVG 和 VML，HTML canvas 针对的是更为底层的绘图功能，但是利用这些底层的 API，通过良好的结构功能设计和封装，完全可以实现功能强的易用性更好的组件库，这在我们的后续文章中介绍。
开源矢量绘图框架 RaphaelRaphael 是一个很小的轻量级矢量绘图类库。正如其名，它能让你像文艺复兴时期意大利画家拉斐尔一样在 Web 页面上绘制出复杂绚丽的矢量图形。Raphael 使用 W3C 推荐的 SVG 和 VML 为矢量绘图的基础，对于目前主流的 Firefox、Webkit、Opearo 浏览器上 Raphael 使用 SVG 绘制图形，对于 IE6/7/8 浏览器 Raphael 使用 VML 来绘制图形。Raphael 在浏览器中创建的所有图形对象都是一个 HTML DOM 对象，这样你就可以使用 JavaScript 为其添加事件和响应，通过 JavaScript 方法来动态的改变图像对象，从而实现任何你想要的动画效果。Raphael 为 Web 开发人员在浏览器中创建矢量图形提供了一个桥梁，它简化了 Web 应用中矢量两会图开发，从此你不必再为跨浏览器、使用和维护各种不同的矢量绘图技术而头疼。目前 Raphael 支持 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ 等浏览器。
使用 Raphael 创建矢量图形非常简单，下面是一些使用 Raphael 的一些代码和图形示例。
清单 10. 使用 Raphael 创建矢量图形代码示例
相关文章
精彩导读
热门资讯
关注我们
