本文属于《html5 Canvas 画图系列教程 http://jo2.org/html5-canvas-tutorial-list/ 》
这里的绘制图片是指把一张现成的图片, 绘制到 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 了?
答案是否定的, 这样做只会报错.
来源: http://www.bubuko.com/infodetail-2878795.html