2

我有：

<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 上都不会绘制任何图像。

会发生什么？小提琴在这里

4

1 回答 1

4

那是因为加载图像是一个异步操作。警报调用可帮助浏览器稍等片刻，以便完成图像加载。因此，该图像将在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...
}
于 2013-07-23T15:31:12.793 回答