context.drawImage古怪行为

我有：context.drawImage古怪行为

<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

来源

2013-07-23 Old Geezer

这是因为加载图像是一个异步操作。警报呼叫有助于浏览器等待一段时间，以便加载图像。为此，图片将在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-23 15:31:12 K3N

context.drawImage古怪行为

回答

相关问题