javascript在画布上画一个图像

我尝试构建一个JavaScript代码，在画布上绘制图像，但我不知道哪里出错。这是我的代码：javascript在画布上画一个图像

<body> 
<canvas id = "my_canvas"></canvas> 
<script> 
function setup(){ 
    var canvas = document.getElementById('my_canvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 600; 
    var image = new Image(); 
    image.src = 'a.png'; 
    ctx.drawImage(image,5,5); 
}; 
window.onload = setup; 
setup(); 

</script>

的问题是，如果我把一行代码setup();月底该图像，然后正确地绘制，我不知道为什么。

谢谢。

来源

2013-10-19 changbenny

您可以发布您的HTML代码吗？另外，你是否在浏览器的控制台中发现任何错误？这是一个开始的好地方。而...你的问题是什么？ – Shahar

是的，我编辑代码并感谢您的建议。 – changbenny

的问题是，image异步加载，因此，如果您设置源和借鉴其立即然后将图像位尚不具备，并没有什么画。

您必须等待图像加载后才能在画布上绘制它。

代码更改为

image.onload = function() { 
    ctx.drawImage(image, 5, 5); 
}; 
image.src = "a.png";

预期应该工作。

来源

2013-10-19 20:48:06 6502

好的，我明白了，谢谢你的解释。 – changbenny

图像异步加载。此代码将工作：

的JavaScript：

function setup(){ 
    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = 800; 
    canvas.height = 600; 
    var image = new Image(); 
    image.onload = function() { 
     ctx.drawImage(image,5,5); 
    }; 
    image.src = 'a.png'; 
} 
window.onload = setup;

来源

2013-10-19 21:01:39 Aeoril

感谢您的解释！ – changbenny

javascript在画布上画一个图像

回答

相关问题