我尝试构建一个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();
,那么图像就会正确绘制,我不知道为什么。
感谢。
答案 0 :(得分:5)
问题是image
是异步加载的,所以如果你设置了源并立即绘制它,那么图像位还没有可用而且没有任何东西被绘制。
您必须等待图像加载才能在画布上绘制。
将代码更改为
image.onload = function() {
ctx.drawImage(image, 5, 5);
};
image.src = "a.png";
应该按预期工作。
答案 1 :(得分:2)
图像是异步加载的。这段代码可以使用:
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;