Question

我有：

<canvas id='canvas' width="300" height="409" style="border:2px solid darkblue" >
</canvas>

然后：

<script type="text/javascript">
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var image = new Image();
  image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';
  alert(image.src);
  context.drawImage(image, 0, 0, 300, 400);
</script>

在IE 10中，图像被绘制为“预期”。但是，当我删除该警告声明时，图片不会被绘制！

在Chrome中，无论是否有警告声明，我的本地PC上都不会绘制图像。

可能会发生什么？小提琴是here

Answer 1

这是因为加载图像是异步操作。警报调用可帮助浏览器稍等一下，以便完成图像加载。因此，图像将在随后的drawImage处提供。

实现此目的的正确方法是以这种方式使用代码：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var image = new Image(); //document.createElement('img'); for Chrome due to issue

// add a onload handler that gets called when image is ready
image.onload = function () {
    context.drawImage(this, 0, 0, 300, 400);
}

// set source last so onload gets properly initialized
image.src = 'http://4.bp.blogspot.com/...-21+Kingfisher.JPG';

onload回调内部的绘制操作可以很容易地成为函数调用：

image.onload = nextStep;
// ...

function nextStep() {
    /// draw image and other things...
}

context.drawImage表现得很奇怪

1 个答案: