canvas 2.0 图片绘制

绘制图片drawImage

2013.02.21 by 十年灯·一条评论

本文属于《html5 Canvas画图系列教程》

这里的绘制图片是指把一张现成的图片，绘制到Canvas上面。

有的人可能就有疑问了，既然是现成的图片，那干嘛用canvas来绘制，直接用img标签展现出来不就行了？

canvas上绘制图片，不是用来展示的，canvas功能更强大，比如，把图片画到canvas上，可以像PS中的滤镜一样，对图片进行修改，而且最后还能保存为新图片。

这些操作很复杂，我们先来看最基本的：如何把图片绘制到canvas上？

canvas中有个现成的绘制图片的方法即drawImage，他的语法如下：

drawImage(image, x, y)

drawImage(image, x, y, width, height)

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

你没有看错，drawImage就是有三种语法，越来越复杂。我们要由浅入深的学习：

1，drawImage(image, x, y)

这是最简单的使用方式。绘制图片嘛，当然要有一张“图”，image参数就是图——这个图可以是一张图片，也可以是另外一个canvas元素，记住！！

然后x,y就是canvas上的坐标，表示你要把图片画在哪个位置，这个不用多说。

这种使用方法，绘制的图片是原始大小。

2，drawImage(image, x0，0, y, width, height)

如果只能把图片按原始大小绘制，那也太逊了。我们有时候需要对图片进行缩放，第2种用法中的width及height参数，即你决定把图片绘制的高度和宽度。

这个高度与宽度和原始图片无关，canvas会强制把图片按这个宽高绘制，如果图片太小，就会放大；大了则会缩小；比例不对则会变形。跟img的width和height差不多

3，drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第3种用法看起来很吓人，因为参数太多了，而且参数都是类似的。

大家注意到有一组参数以s开头，而另一组则以d开头，这是什么意思？

s其实是slice的意思，即切割；d你可以理解为draw。

切割的意思是，有时候我们不需要画出整个图片——可能一张图片上只有某个区域是我们想要的，这时候我们可以把想要的那一块切出来，在绘制到canvas上。

所以，(sx,sy)是原图片上开始切割的坐标，而(sWidth,sHeight)则是你要切割多宽多高；后面的dx,dy,dWidth,dHeight则与用法2相同。如：

这表示在原图jpg的10,10的位置开始切割下来一个200*200大小的块，然后把这块儿绘制到canvas上40,40的坐标处，并且大小依旧是200*200。

另外，s和d系列的参数，谁应该在前面呢？怎么才能记住他们的顺序？

先切再画，比先画再切更省事。画了再切，不就成了先画出多余的，又把多余的给切掉，这不是蛋疼吗？

建议大家自行测试一下dramImage的用法，可以加深印象。

大家测试的时候一定要记住：图片需要加载完成才能绘制出来。如果你是用JS载入图片，那你需要把绘制函数加在图片的onload事件上，才能确保绘制成功。

drawImage注意事项：

如果在原图上切割的范围，超出了图片本身的范围，会发生什么？会不会把已有在图片部分八绘制出来？

答：不会报错，但图片完全不会绘制出来，只会绘制一片空白。

最后，drawImage这三种方式，各自的参数个数是不能省略的。比如，我们在第3个使用方式中，打算切割把切割下来的200*200的图片依然按200*200绘制出来，那么我们可不可以不填最后那两个参数呢？是不是就默认200*200了？

答案是否定的，这样做只会报错。