HTML5学习笔记（3）——canvas图片

在canvas有关于图片的操作中最主要也是最重要的就是drawImage函数了，所以我们只要掌握了drawImage的用法也就基本掌握了canvas有关于图片的操作了。
drawImage()函数一共有以下三种形式：
1.drawImage(image,dx,dy) 接受一个image图片，并将该图片绘制到canvas中。image可以是已经存在的元素，或者是通过Javascript创建的图片元素；给出的坐标(dx，dy)代表图片左上角的位置。
2.drawImage(image,dx,dy,dw,dy) 接受一个image图片，将其缩放为宽度为dw和高度为dy，然后把它绘制到canvas上的(dx,dy)位置。
3.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 接受一个图片，通过参数(sx,sy,sw,sh)指定图片的裁剪位置，缩放到(dw,dh)的大小，最后把它绘制到canvas上的(dx,dy)位置。这个有点类似于css sprite背景定位技术，不过这个比css sprite更具有灵活性。
下面给大家讲解一个例子，让大家对drawImage这三种有更深刻的掌握。
在此之前，们先在images文件夹中准备两张图片，分别为duck.png和micky.png，duck.png中为一只唐老鸭，micky.png中有三只米老鼠，如下图（1）、图（2）所示:

图（1） duck.png

图（2）micky.png
以下代码将全面地给大家演示drawImage的三种用法：
//利用已有的创建图像 var canvas = document.getElementById("e"); //得到已有canvas元素的节点 var context = canvas.getContext("2d"); //设置canvas元素节点 var duck = document.getElementById("duck"); //得到已有元素的节点 context.drawImage(duck,0,0); //drawImage用法1，image为已有的元素 //利用Image()类来创建图像 var duck2 = new Image(); duck2.src="images/duck.png"; context.drawImage(duck2,0,250); //drawImage用法1，image通过Javascript创建的元素 //缩小版的鸭子 context.drawImage(duck2,0,500,160/2,226/2); //drawImage用法2，图片的大小为原来的1/2 //米老鼠 var micky = new Image(); micky.src="images/micky.png"; context.drawImage(micky,250,0); //全部显示出来 context.drawImage(micky,175,0,175,226,250,250,175,226); //drawImage用法3，截取出第二只米老鼠 context.drawImage(micky,350,0,180,226,450,250,180*1.4,226*1.4); //drawImage用法3，截取出最后一只米老鼠，并且放大到1.4倍
那么在chrome中的运行结果如下：

到此为止，HTML5当中的图片绘制的drawImage用法就给大家介绍完了。
demo演示地址：http://xiaowu.shnow.cn/html5/note3/index.html

延伸阅读