HTML5CANVAS初级入门教程

1、html5canvas初级入门教程html5 canvas 即 html5 画布， 是一个现代浏览器都支持的html5 非插件绘图的功能，本文将展示如何通过html5 canvas api 操作 canvas 元素、绘制图形、改变绘图颜色以及删除图形，让我们开始进入这很酷的新技术的短暂旅行吧。canvas 元素简介使用 canvas 元素相当简单，它只是一个单纯的html 标签，外加宽高两个特性。上面的代码在页面中插入了一个透明的画布，canvas 元素内部的内容可以在不支持canvas功能的浏览器下显示你想给你的用户提供的信息，联想下元素就可以。浏览器支持很重要的一点就是浏览器对canvas

2、 的支持还是相当不错的，所有现代浏览器都支持它，包括最新版的ie9 ：internetexplorer 9.0+safari 3.0+firefox 3.0+chrome 3.0+opera 10.0+ios 1.0+android 1.0+有趣的是，你可以在ie8 以及更低版本的ie 浏览器下使用canvas 功能，借助explorercanvas插件。画布尺寸当定义 canvas 元素的尺寸时，最好通过html 设置它的width 和 height 特性，因为通过css设置宽高会导致画布按比例缩放到你设置的值，这背后有它的逻辑原因：在canvas 元素的内部存在一个名为2d 渲染环境（ 2

3、d rederingcontext ）的对象，所以，通过css设置画布尺寸会引起奇怪的效果。探索 2d 渲染环境我们上面提到的canvas 元素只是canvas 功能的一部分，另一部分是2d 渲染环境，它可以让你实现很酷的看得到的东西。需要完全理清的是：当你使用canvas ，你不是在canvas 元素上画图， 事实上你是在canvas元素内部的2d 渲染环境上。坐标系统如果你曾经使用过2d 绘图编程语言（比如actionscript 、processing 等），你应该会了解基于屏幕（ screen-based ）的坐标系统。 canvas 内部的 2d 渲染环境并没有什么不同之处，它采用标

4、准的笛卡尔坐标系统，原点位于屏幕左上角，向右移动会增加x 坐标的值， 向下移动会增加 y 坐标的值，很容易理解。通常坐标系统的单位是屏幕的1 像素。操作 2d 渲染环境需要利用 javascript 提供的 api 来获取 2d 渲染环境对象， 该方法为： getcontext() ，看下简单的例子：varcanvas=document.getelementbyid(csser-com-canvas);varc=canvas.getcontext(2d);通过调用 canvas 对象的 getcontext() 方法， c 变量就包含了指向2d 渲染环境的引用，这意味着你现在已经完成了在画布上

5、绘图的一切准备，接下来可以开始绘图了。绘制矩形获得了 2d 渲染环境对象，就可以通过调用api 提供的大量方法来进行绘图了，一个最基本的方法就是fillrect() ，通过它可以绘制一个填充颜色的矩形（颜色默认值为黑色）。在 c 变量的下面增加以下代码：c.fillrect(0,0,50,50);这将在画布左上角绘制绘制一个黑色背景的正方形：在调用 fillrect() 方法时传入了4 个参数：第一个是基于原点的x 坐标位置第二个是基于原点的y 坐标位置第三个是宽度第四个是高度fillrect 的伪代码看起来应该像这个样子：c.fillrect(x,y,width,height);很酷的是，不

6、仅可以绘制填充的矩形，你还可以绘制线框矩形，使用strokerect() 方法，绘制四周产生描边效果的矩形，如：c.strokerect(50,50,100,100);strokerect 的参数与fillrect 是一致的，绘制的结果如下：利用 canvas 绘图，简单、优美，所有的方法都很易懂，但是当放在一起使用可以让你画出很漂亮的图形。绘制路径矩形是唯一一个可以通过单个api 方法绘制的图形，先把它放在一边，我们来学习下路径（paths）绘制。使用路径，可以绘制线条、连续的曲线以及复合图形。绘制一个简单的路径需要利用一些aip 方法：beginpath 开始一个新路径moveto 移动路

7、径的绘图起点lineto 从 moveto 定义的点开始绘制连续的路径，或者从上一次的lineto 的终点开始绘制。closepath 连接最后的点和最初的点并关闭路径绘制fill 用颜色填充路径stroke 描变路径尝试执行下面的代码：c.beginpath();c.moveto(50,50);c.lineto(50,250);c.lineto(250,250);c.closepath;c.fill();执行结果为：你可以用同样的方法绘制你希望的图形，canvas 还包含更高级的路径绘制，比如圆弧（可以绘制圆形）和贝塞尔曲线（用于绘制很酷的曲线效果），总之，绘制路径要比绘制矩形复杂的多。改变

8、颜色到目前为止，我们的示例所绘制的都是填充或描边的黑色，canvas 也提供了一些属性用于改变绘制图形的颜色，它们是fillstyle 和 strokestyle ，它们的语法都是可以自解释的，所以我们直接来改变一个矩形的填充颜色：c.fillstyle=rgb(255,0,0);c.fillrect(50,50,100,100);结果：或者，你可以改变描边的颜色：c.strokestyle=rgb(255,0,0);c.strokerect(50,50,100,100);结果：fillstyle 和 strokestyle 属性很漂亮的一点就是，它们都支持普通css颜色值， 这意味着你可以使

9、用 rgb、rgba、hsa、颜色名称以及十六进制颜色值。还有一点需要指出的是，改变画布中的颜色值不会影响已经绘制的任何图形，例如， 如果你绘制了一个黑色的矩形，然后设置填充为红色，接着绘制了另一个矩形，这时第一个矩形仍然为黑色。改变线宽除了可以改变颜色，还可以利用linewidth 属性改变描边线条的宽度，按照上面的例子，改变线条宽度：c.linewidth=20;c.strokestyle=#f00;c.strokerect(50,50,100,100);结果：同样的可以改变路径的线宽：c.linewidth=20;c.beginpath();c.moveto(50,50);c.linet

10、o(50,250);c.lineto(250,250);c.closepath();c.stroke();结果：还有一些其它的改变线条的方式，比如linecap 设置线条的末端，linejoin 设置线条的角。删除图形最后我们来了解下如何删除已经绘制的图形，删除图形只需javascript api 提供的一个名为clearrect 的方法，其原理是使参数指定的矩形区域背景变为透明。本文示例画布长宽分别为500 像素，要想删除整个画布图形，可以这样做：c.fillrect(50,50,100,100);c.clearrect(0,0,500,500);上面的代码执行后，你会什么都看不到，事实上填充的矩形已经绘制，只是瞬间被删除了，所以你看不到它。如果你不清楚画布的具体宽高，清除整个画布可以这样：c.clearrect(0,0,canvas.width,canvas.height);删除画布中的区域如果你不想删除整个画布的图形，而仅仅删除画布中的一个区域，假如， 你绘制了一个黑色的正方形，旁边绘制了一个红色的正方形：c.fillrect(50,50,100,100);c.fillstyle=#f00;c.fillrect(200,50,100,100);看起来是这个样子：接下来你可以通过clearrect 删除