在canvas里画图有两个步骤：

获得图片源。

drawImage()画图。

图片源

canvas支持以下几种图片资源：

HTMLImageElement
可以使用Image()方法构造的图片，也可以是HTML的

元素。

HTMLVideoElement
可以使用HTML的

HTMLCanvasElement
可以将另一个canvas作为图片资源。

获得图片

如何获得页面中的

、

().

脚本开始执行以后，图片就开始加载。
这里需要注意的是，如果图片还没加载完成就用drawImage()方法绘制图片的话，将什么都画不出来，如果是旧版浏览器，还会抛出错误。所以，绘图的时候要确保图片已经加载完成。

().() )

如果是只要加载一张图片的话，这个方法是不错的。但是如果有很多图片要加载的话，这个方法就不好了，需要使用到图片预加载的技巧，这个技巧放在后面讲。
我们也可以使用Base64编码将图片嵌在代码里。

().

绘制图片

drawImage(image, x, y)

image是图片引用，x, y是要绘制的图片的左上角的坐标。

最简单的例子

ctx img ()() ).)))).

结果

设置图片大小

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

drawImage方法也可以指定图片的宽度和高度，缩放图片。

例子

ctx img ()() i ij ji ).

结果

裁剪

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

各参数的说明看下图：

例子

canvas ctx .).); }

在这个例子中，使用了

标签来作图片源。
如果在CSS中将

标签设置为隐藏，那么输出的结果图片将不可见。

结果

光滑

缩放图片可能会造成图象模糊等问题，可以通过 imageSmoothingEnabled属性来控制光滑算法。默认这个属性的值是true。