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