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>

画布中的图像不可显示。图像和文件位于一个目录中。 Web浏览器矩形等绘图，或图像不。为什么呢？

Answer 1

在图像的onLoad回调中执行drawImage。 MDN引用：

执行此脚本时，图像开始加载。试着打电话图像之前的drawImage 完成加载将投入壁虎 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>

我无法将外部图像加载到画布上

2 个答案: