1、首先还是使用之前讲过的Image()函数来预加载图像。

在调用图像之前，需创建一个事件监听器，为其保证图像已经正确的加载。

如下图：

监听图片已经正确加载

2、把图像显示在画布上面，这里将不再使用createPattern()，改而使用drawImage()函数来实现

提示：createPattern()用在图像填充，而drawImage()是直接加载图像。两者有明显的区别，不要混淆了哦！

drawImage()中包含9个参数，第一个参数：Image对象，也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。

具体用法如下：

图片加载代码

图片加载预览效果

---

web前端/H5/javascript学习群：250777811

欢迎大家关注我的微信号公众号，公众号名称：web前端EDU。扫下面的二维码或者收藏下面的二维码关注吧（长按下面的二维码图片、并选择识别图中的二维码）