黑色帆布代替图片
问题描述:
我有一个画布问题。比方说,1/10的时候,我在黑色方块上代替了我的图片。我的代码如下,我如何修改它以避免黑色显示?黑色帆布代替图片
<canvas id="Canvas" width="954" height="267"></canvas>
<script>
var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
// Map sprite
var mapSprite = new Image();
mapSprite.src = 'image.png';
var main = function() {
draw();
};
var draw = function() {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, 954, 267);
}
main();
</script>
编辑1:全功能抽奖:
var draw = function() {
// Clear Canvas
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
// Draw diagramme
context.drawImage(mapSprite, 0, 0, nextWidth, nextHeight);
//draw all precedent cross
cross = new Image();
cross.src = "cross.png";
for (var i = 0; i < array_x.length; i++) {
context.drawImage(cross, array_x[i], array_y[i], 10, 10);
}
}
答
我相信要等到图像加载。
替换:
main();
有了:
mapSprite.addEventListener('load', main);
+0
感谢这个答案。这似乎解决了图像问题。实际上,我的功能有点复杂(编辑1)。我有2个包含坐标的数组,并且想要在图像上绘制它们。随着你的解决方案,我有我的形象,但现在,我没有我的坐标(十字)。 – ranell
+0
@ranell我已经回答了这个问题。如果你有一个新的 - 创建一个新的问题。建议:创建jsfiddle来重现问题。现在问题不是独立的。 –
等待图像加载?做'mainSprite.onload = main'而不是'main()',在末尾 – towc