canvas之图像

一、canvas图像

canvas更有意思的一项特性就是图像操作能力。用于动态的图像合成或者作为图形的背景，以及游戏界面（Sprites）等等。浏览器支持的任意格式的外部图片都可以使用，比如PNG、GIF或者JPEG。 甚至可以将同一个页面中其他canvas元素生成的图片作为图片源。

引入图像到canvas里需要以下两步基本操作：

• 获得一个指向HTMLImageElement的对象或者另一个canvas元素的引用作为源
  也可以通过提供一个URL的方式来使用图片
• 使用drawImage()函数将图片绘制到画布上

二、绘制图片

drawImage 方法有三种形态。

(1)把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)
image 是 image 或者 canvas 对象，x 和 y 是 canvas 里的起始坐标。

示例1：

image.png

（3）切片 Slicing
drawImage 方法的第三个也是最后一个变种有8个新参数，用于控制做切片显示的。

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。
前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

image.png

示例3：

image.png

Image to use:

Canvas:

其它文章请访问：

• canvas入门
• canvas之渐变
• canvas之文本
• canvas之图像
• canvas之变形

参考：路径-CanvasAPI|MDN