上绘制img(drawImage())时需要注意的事

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

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

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

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

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

x:图片定位点(左上角)的x轴参数;

y:图片定位点(左上角)的y周参数;

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

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

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

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

 <body>
<div id="zone">
<h3>画布</h3>
<canvas id="huaBu" id="getCanvas">抱歉,您的浏览器不支持该标签</canvas>
</div>
<div id="zone">
<h3>图像</h3>
<img id="getImg" src="Img.png" style="width:300px;height:170px;" />
</div> <script>
var c = document.getElementById("huaBu");
var ctx = c.getContext("2d");
var img = document.getElementById("getImg");
ctx.drawImage(img, 0, 0); //直接绘制图片到画布上
</script>
</body>

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

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

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

 <body>
<div id="zone">
<h3>画布</h3>
<canvas id="huaBu" id="getCanvas">抱歉,您的浏览器不支持该标签</canvas>
</div>
<div id="zone">
<h3>图像</h3>
<img id="getImg" src="Img.png" style="width:300px;height:170px;" />
</div> <script>
var c = document.getElementById("huaBu");
var ctx = c.getContext("2d");
var img = document.getElementById("getImg"); img.onload = function() {
ctx.drawImage(img, 0, 0); //在图片加载完毕后再执行绘制图片的操作
}
</script>
</body>

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

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

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

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

就一样了:

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

上一篇:【BZOJ2741】【FOTILE模拟赛】L 分块+可持久化Trie树


下一篇:bzoj 2741: 【FOTILE模拟赛】L 分塊+可持久化trie