canvas 2.0 图片绘制

时间:2022-12-21 11:25:30

绘制图片drawImage

本文属于《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相同。如:

canvas 2.0 图片绘制

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

canvas 2.0 图片绘制

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

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

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

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

drawImage注意事项:

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

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

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

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