新的HTML5规范旨在帮助开发人员更轻松的编写出各类Web应用，以顺应当前SaaS，云计算以及RIA等技术的最新趋势。在HTML5得以广泛推广之前，开发人员通常使用SVG，VML等技术进行Web绘图操作，但这些基于XML的绘图语言声明式的绘图方式并不能满足复杂绘图操作在性能上的需求，比如Web游戏所需要的像素级别的绘图能力。下面学步园小编来讲解下怎样使用HTML5canvas进行Web绘图?
怎样使用HTML5canvas进行Web绘图
HTML5中新引入的canvas元素使得Web开发人员在无须借助任何第三方插件(如Flash，Silverlight)的情况下，可以直接使用JavaScript脚本在Web页面进行绘图。它首次由苹果公司的Webkit框架引入实现，并成功运用在Safari浏览器中，读者在这里可以体验到基于canvas的精彩示例。目前，canvas已成为HTML5规范中的事实性标准，并且已经被Firefox3.0+,Safari3.0+,Chrome3.0+,Opera10.0+等浏览器所支持。最近(本文撰写之时)，IE也正式宣称将在其9.0版本之后，开始对canvas元素进行支持。
基于canvas的绘图填补了SVG绘图的在复杂绘图操作，特别是性能方面的不足，可广泛应用于Dashboard，2D/3DGame等Web应用中。
基本绘图API
在了解了什么是canvas元素之后，是时候使用canvas在Web页面上真正进行的绘图操作了。实际上，单独的一个canvas标记只是在页面中定义了一块矩形区域，并无特别之处，开发人员只有配合使用JavaScript脚本，才能够完成各种图形，线条，以及复杂的图形变换操作，与基于SVG来实现同样绘图效果来比较，canvas绘图是一种像素级别的位图绘图技术，而SVG则是一种矢量绘图技术。正鉴于这种本质机理的不同，如何更快速高效的进行canvas渲染成为各主流JavaScript执行引擎性能比拼的重要指标之一。目前，Chrome的V8,Firefox的SpiderMonkey以及Safari的Nitro等引擎都已经能够很好的满足二维绘图所需的必要性能指标，虽然在运行一些基于canvas的游戏时CPU占用率还是相对较高，但我们有理由相信随着NVIDIA和AMD等一系列硬件厂商的参与，硬件加速技术将大大提升Web应用的性能。
在开始绘图之前，我们需要首先创建一个指定大小的canvas，并为其指定一个id，方便在JavaScript脚本中获取该DOM实例对象。声明一个canvas节点的方式如下所示。
Fallbackcontent,incasethebrowserdoesnotsupportCanvas.
需要指明的是，由于无法保证所有用户使用的浏览器都能够支持canvas元素，所以在目前开发基于canvas的Web应用中需要增加“Fallbackcontent”，以提示用户他们无法正常体验此功能的原因或建议他们去下载最新的浏览器。
怎样使用HTML5canvas进行Web绘图
这里，好奇的读者可能会问，既然这是一个普通的DOM节点，那么便意味着可以通过直接改变其width或height属性值来改变canvas的大小?确实如此，但是，正如之前提到的canvas是一种像素级别的绘图方法，因而，一旦动态调整canvas的大小，canvas将被“重置”到一个新的初始状态，即便是如下这种操作，也会将canvas内的位图清除并将所有相关属性恢复到初始值的状态。当然，我们也可以把这当作重置canvas的小技巧来使用。
document.getElementById("canvas").width=document.getElementById("canvas").width;
简单图形绘制
基于canvas的绘图并不是直接在canvas标记所创建的绘图画面上进行各种绘图操作，而是依赖画面所提供的渲染上下文(RenderingContext)，所有的绘图命令和属性都定义在渲染上下文当中。在通过canvasid获取相应的DOM对象之后首先要做的事情就是获取渲染上下文对象。渲染上下文与canvas一一对应，无论对同一canvas对象调用几次getContext()方法，都将返回同一个上下文对象。目前，所有支持canvas标签的浏览器都支持2D渲染上下文，可以使用如下的代码来获取该对象。
varcontext=document.getElementById("canvas").getContext("2d");
除此之外，在不久的将来，开发人员还会能够得到基于OpenGL的3D渲染上下文以在canvas中进行3D绘图。
在开始动手绘制路径之前，首先需要明确的是：矩形绘制API是一种即时性的API，他会在相应的绘图函数执行完毕之后，将图形即时的渲染在画面上。然而路径绘制API并非如此，完整的路径绘制过程大致可以分为如下两个阶段：
定义路径轮廓：
在每个canvas实例对象中都拥有一个path对象，创建自定义图形的过程就是不断对path对象操作的过程。每当开始一次新的图形绘制任务，都需要先使用beginPath()方法来重置path对象至初始状态，进而通过一系列对moveTo/lineTo等画线方法的调用，绘制期望的路径，其中moveTo(x,y)方法设置绘图起始坐标，而lineTo(x,y)等画线方法可以从当前起点绘制直线，圆弧以及曲线到目标位置。最后一步，也是可选的步骤，是调用closePath()方法将自定义图形进行闭合，该方法将自动创建一条从当前坐标到起始坐标的直线。
绘制路径
定义完路径的轮廓，此时canvas画面中没有显示任何路径，开发人员还可以对路径进行修改。一旦确定完成，则需要继续调用stroke()/fill()函数来完成将路径渲染到画面的最后一步。路径的轮廓颜色和填充颜色由strokeStyle和fillStyle属性决定。
清单2绘制一个图2所示半圆弧，并通过closePath()方法完成图形的闭合。
以上就是关于“怎样使用HTML5canvas进行Web绘图”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!