<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="myCanvas" width="300" height="200" style="border:1px solid black"> <!--屬性賦值時一般都是 xx="yyy" 而屬性裏具有別的屬性還要賦值時， 格式是 xx:y (可能有特殊情況，因爲我學習的還不是很多)--> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt= c.getContext("2d"); /* var img=new Image(); img.src="ct_html5_canvas_image.gif"; cxt.drawImage(img,0,0); 直接用這種形式是不出圖片的，因爲圖片的加載是異步的。會先執行了繪製函數， 但是此時圖片還沒有加載進來，所以是空白的，需要用下邊的方式，實現圖片的預加載。 */ preImage("ct_html5_canvas_image.gif",function(){ cxt.drawImage(this,0,0); }); function preImage(url,callback){ var img = new Image(); //創建一個Image對象，實現圖片的預下載 img.src = url; if (img.complete) { // 如果圖片已經存在於瀏覽器緩存，直接調用回調函數 callback.call(img); return; // 直接返回，不用再處理onload事件 } img.onload = function () { //圖片下載完畢時異步調用callback函數。 callback.call(img);//將回調函數的this替換爲Image對象 }; } </script> </body> </html>具體效果如下：
思路解釋如下：
如前一樣，在body裏創建一個canvas標籤當作畫板。
<canvas id="myCanvas" width="300" height="200" style="border:1px solid black"> <!--屬性賦值時一般都是 xx="yyy" 而屬性裏具有別的屬性還要賦值時， 格式是 xx:y (可能有特殊情況，因爲我學習的還不是很多)--> </canvas>
然後就是圖像的繪製。寫在script標籤裏，sc標籤寫在body標籤裏。
<script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt= c.getContext("2d"); /* var img=new Image(); img.src="ct_html5_canvas_image.gif"; cxt.drawImage(img,0,0); 直接用這種形式是不出圖片的，因爲圖片的加載是異步的。會先執行了繪製函數， 但是此時圖片還沒有加載進來，所以是空白的，需要用下邊的方式，實現圖片的預加載。 */ preImage("ct_html5_canvas_image.gif",function(){ cxt.drawImage(this,0,0); }); function preImage(url,callback){ var img = new Image(); //創建一個Image對象，實現圖片的預下載 img.src = url; if (img.complete) { // 如果圖片已經存在於瀏覽器緩存，直接調用回調函數 callback.call(img); return; // 直接返回，不用再處理onload事件 } img.onload = function () { //圖片下載完畢時異步調用callback函數。 callback.call(img);//將回調函數的this替換爲Image對象 }; } </script>在寫這一部分的時候，按正常的教程來寫，圖片是加載不出來的。
神奇的是在地址欄 按回車重新進入網頁之後圖片就能加載了。
查閱了網上的說法之後才解決。也就是註釋裏寫到的，因爲在繪製圖片的時候圖片還沒有加載進來，因爲圖片的加載是異步的，所以會造成繪製空白。而通過上邊的方式就能夠解決這一問題，讓圖片得到加載之後再進行繪製。