在canvas中插入图片

在canvas中显示图片非常简单。可以通过修正层为图片添加印章、拉伸图片或者修改图片等，并且图片通常会成为canvas上的焦点。用HTML5 Canvas API内置的几个简单命令可以轻松地为canvas添加图片内容。

不过，图片增加了canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。 浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到canvas上，那么canvas将不会显示任何图片。因此， 开发人员要特别注意，在呈现之前，应确保图片已经加载完毕。

我们的示例将加载一张树皮纹理的图片作为树干以供canvas使用。为保证在呈现之前图片已完全加载，我们提供了回调，即仅当图像加载完成时才执行后续代码，如代码清单2-14所示。

代码清单2-14 加载图像

1. // 加载图片bark.jpg

2.

3. var bark = new Image();

4. bark.src = "bark.jpg";

5.

6. // 图片加载完成后，将其显示在canvas上

7. bark.onload = function () {

8. drawTrails();

9. }

复制代码

从上面的代码中可以看到，我们为bark.jpg图片添加了onload处理函数，以保证仅在图像加载完成时才调用主drawTrails函数。这样做可以保证后续的调用能够把图片正常显示出来，如代码清单2-15所示。

代码清单2-15 在canvas上显示图像

1. // 用背景图案填充作为树干的矩形

2.

3. context.drawImage(bark, -5, -50, 10, 50);

复制代码

在这段代码里，我们用纹理贴图替换了之前调用fillRect函数的填充来作为新的树 干。尽管替换的动作很小，但canvas上显示出来的树干更有质感。注意，在drawImage函数中，除了图片本身外，还指定了x、y、width和 height参数。这些参数会对贴图进行调整以适应预定的10×50像素树干区域。我们还可以把原图的尺寸传进来，以便在裁切区域内对图片进行更多控制。