javascript在画布上绘制图像

Question

我尝试构建一个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(); 最后，图像正确绘制，我不知道为什么。

谢谢。

Answer 1

问题在于image是异步加载的，因此，如果您设置源并立即绘制它，则图像位尚不可用，因此不会绘制任何内容。

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

将代码更改为

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

应该能按预期工作。

Answer 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;

javascript在画布上绘制图像

问题描述

2 个解决方案

解决方案1
5 已采纳 2013-10-19 20:48:06

解决方案2
2 2013-10-19 21:01:39

javascript在画布上绘制图像

问题描述

2 个解决方案

解决方案1 5 已采纳 2013-10-19 20:48:06

解决方案2 2 2013-10-19 21:01:39

解决方案1
5 已采纳 2013-10-19 20:48:06

解决方案2
2 2013-10-19 21:01:39