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

　　在canvas有关于图片的操作中最主要也是最重要的就是drawImage函数了，所以我们只要掌握了drawImage的用法也就基本掌握了canvas有关于图片的操作了。

　　drawImage()函数一共有以下三种形式：

　　1.drawImage(image,dx,dy)    接受一个image图片，并将该图片绘制到canvas中。image可以是已经存在的<img>元素，或者是通过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的三种用法：

//利用已有的<img>创建图像
var canvas = document.getElementById("e");    //得到已有canvas元素的节点
var context = canvas.getContext("2d");        //设置canvas元素节点
var duck = document.getElementById("duck");    //得到已有<img>元素的节点
context.drawImage(duck,0,0);                //drawImage用法1，image为已有的<img>元素
//利用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