第五章、使用预绘制图片

你可以添加预先绘制的图像到画布上，如果gif,jpeg,png,svg或者视频的当前帧。默认情况，这样的图片会按照它原本的大小绘制，超过了canvas的部分会被裁剪。但是，你可以指定高度和宽度在其中显示图像，或者图像绘制区域来绘制。

你可以用img元素，视频元素，或其他canvas元素做图像源。如果你的image是一个html元素，通过getElementById 把它变成一个javascript对象。你也可以在javascript中创建一个图像源如new Image.

本章介绍如何使用通过<img>标签指定的图像。如果你使用gif动画做为图像源，那么只有动画的第一帧被现实，透明度是支持的。

当你使用png图像作为图像源，那么建议它有个透明的背景，这样能够顺利符合其它元素。与Gif，jpg相比，png是首选的图像源。

如果你的动画中使用了大量的缩放和旋转，理想的图像源是一个svg文件。Svg本身与分辨率武馆，所以对任何大小或者旋转，看起来更加光滑和锐利。

非svg格式的图片缩放比例超过1能够导致像素画。除非你的源是svg，如果你的图像需要显示各种尺寸，最好的结果是用图像本身显示尺寸最大作为源，可以向下缩放图像使它显小。

你可以使用另一个canvas作为图像源，但是不能用canvas作为本身内部的图像源，使用canvas作为图像源的主要原因是作为一个离屏缓冲进行图像处理。你可以将图像加载到一个隐藏的画布，处理图像的像素级别，并在另一个画布上显示结果。（这一段有点复杂，后面图像的像素级别处理时会详细讲解。）

 

绘制图像

绘制图像使用图像原本的宽高，裁切掉canvas之外的部分。调用drawImage(image,x,y),其中(x,y)是坐标，从哪个点开始绘制图像。

示例：

<canvas id="can" height="300" width="300"></canvas>

<img id="sprite" src="lem.png" style="display:none" />

Js：

var sprite = document.getElementById("sprite");

ctx.drawImage(sprite, 0, 0);

 

按照给定的宽高绘制图像

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

图像被缩放到指定的宽高，超出canvas的部分会从边界处裁切掉。

ctx.drawImage(sprite, 0, 0, 200, 100);

绘制带测绘区region mapping 的图像

ctx.drawImage(image, sx, sy, sWide, sHi, dx, dy, dWide, dHigh)