在上繪製img（drawImage()）時須要注意的事

時間 2019-12-09

標籤繪製 img drawimage 須要注意欄目 HTML 简体版

原文原文鏈接

<canvas>標籤至關因而一個畫布，css決定畫布的樣式（這塊畫布的背景顏色、大小等），腳本（通常使用JavaScript）就是畫筆，咱們能夠在這個畫布上繪製線條、形狀、文字、圖片等。css

<canvas>標籤對中的內容會在瀏覽器不支持這個標籤的時候（如在IE8以及更舊版本的瀏覽器上啓動）的時候會顯示出來，若是瀏覽器支持該標籤則不會顯示。canvas

繪製圖片和繪製其它內容有些不一樣，我對繪製圖片的理解就是：將一張圖片複印到這塊畫布上。但咱們不能直接畫到這塊畫布上，這是有緣由的。瀏覽器

咱們先來看繪製圖片代碼的語法：content.dragImage(image,x,y)異步

image：要繪製的圖片。能夠是<i大mg>標籤中的圖片；spa

x：圖片定位點（左上角）的x軸參數；code

y：圖片定位點（左上角）的y周參數；blog

固然，語法不止這一種，這裏就用這個語法來介紹一下使用該方法時要注意的一件事情。事件

咱們先設置好畫布區域和裝圖片的區域，像這樣：圖片

稍微設置了點樣式，讓這兩個區域並排顯示。若是你直接使用drawImage()將右邊的圖像插入到左邊的畫布上，像下面這樣：ip

 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>