在<canvas>上绘制img（drawImage()）时需要注意的事

<canvas>标签相当于是一个画布，css决定画布的样式（这块画布的背景颜色、大小等），脚本（一般使用JavaScript）就是画笔，我们可以在这个画布上绘制线条、形状、文字、图片等。

<canvas>标签对中的内容会在浏览器不支持这个标签的时候（如在IE8以及更旧版本的浏览器上启动）的时候会显示出来，如果浏览器支持该标签则不会显示。

绘制图片和绘制其它内容有些不同，我对绘制图片的理解就是：将一张图片复印到这块画布上。但我们不能直接画到这块画布上，这是有原因的。

我们先来看绘制图片代码的语法：content.dragImage(image,x,y)

image：要绘制的图片。可以是<i大mg>标签中的图片；

x：图片定位点（左上角）的x轴参数；

y：图片定位点（左上角）的y周参数；

当然，语法不止这一种，这里就用这个语法来介绍一下使用该方法时要注意的一件事情。

我们先设置好画布区域和装图片的区域，像这样：

稍微设置了点样式，让这两个区域并排显示。如果你直接使用drawImage()将右边的图像插入到左边的画布上，像下面这样：

 1 <body>
 2     <div id="zone">
 3         <h3>画布</h3>
 4         <canvas id="huaBu" id="getCanvas">抱歉，您的浏览器不支持该标签</canvas>
 5     </div>
 6     <div id="zone">
 7         <h3>图像</h3>
 8         <img id="getImg" src="Img.png" style="width:300px;height:170px;" />
 9     </div>
10     
11     <script>
12         var c = document.getElementById("huaBu");
13         var ctx = c.getContext("2d");
14         var img = document.getElementById("getImg");
15         ctx.drawImage(img, 0, 0);    //直接绘制图片到画布上
16     </script>
17 </body>

你就会发现，什么事都没发生。

这是因为网页中图片加载是异步加载，图片还没有加载完，脚本就执行了，那它就绘制了个还没加载完的图像，一片空白。

解决方法也很简单：脚本在图片加载完毕后再执行就行了。这个时候就要用到onload事件了。

 1 <body>
 2     <div id="zone">
 3         <h3>画布</h3>
 4         <canvas id="huaBu" id="getCanvas">抱歉，您的浏览器不支持该标签</canvas>
 5     </div>
 6     <div id="zone">
 7         <h3>图像</h3>
 8         <img id="getImg" src="Img.png" style="width:300px;height:170px;" />
 9     </div>
10     
11     <script>
12         var c = document.getElementById("huaBu");
13         var ctx = c.getContext("2d");
14         var img = document.getElementById("getImg");
15         
16         img.onload = function() {
17             ctx.drawImage(img, 0, 0);    //在图片加载完毕后再执行绘制图片的操作
18         }
19     </script>
20 </body>

这个时候画布上就绘制了我们指定的图片：

想要画布上图像的大小和原图一致，修改drawImage()的参数就好啦，比如我这里设置成这样：

ctx.drawImage(img, 0, 0,300,150);

就一样了：

 

posted on 2019-04-26 16:25  苏帕  阅读(4137)  评论(0)  编辑  收藏  举报

导航