<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);
就一样了：
