我無法將外部圖像加載到 canvas

Question

我有 JavaScript 代碼。

 <canvas id="view" width="120" height="120">
  błąd
 </canvas>
 <script>
 var _view = document.getElementById("view");
 if(_view.getContext) {
  var canvas = _view.getContext("2d");
  var img = new Image();
  img.src = "fajnetlo.png";
  canvas.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50);
 }
 </script>

在 canvas 圖像中無法顯示。 圖像和文件在一個目錄中。 Web 瀏覽器矩形等繪圖，或圖像不。 為什么？

Answer 1

在圖像的 onLoad 回調中做 drawImage。 MDN 報價：

執行此腳本時，圖像開始加載。 嘗試在圖像完成加載之前調用 drawImage 將拋出 gecko 1.9.2 及更早版本，並且在 Gecko 2.0 及更高版本中不執行任何操作。 因此，您必須使用 onload 事件處理程序：

var img = new Image();   // Create new img element
img.onload = function(){
    // execute drawImage statements here
}; 
img.src = 'myImage.png'; // Set source path

來源： https://developer.mozilla.org/en/Canvas_tutorial/Using_images

Answer 2

<canvas id="view" width="120" height="120">
błąd
</canvas>
<script>
var view = document.getElementById("view");

var ctx= view.getContext("2d");


img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, 50, 50, 0, 0, 50, 50);
}
img.src = 'fajnetlo.png';

</script>