[英]javascript: Image drawing(background) on canvas
所以我遇到的问题是我不能先绘制背景,然后在背景上绘制其他所有内容。 在我的代码中的某些地方(在循环函数中)它可以工作,但在我的初始化函数中却没有。 首先介绍一下我的代码:
获取背景img并绘制它的代码:
function imgImport(imgName,ctx){
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
};
img.src = 'client/img/' + imgName + '.jpg';
}
module.exports = imgImport;
很酷,现在在我的初始化函数中,我像这样使用上面的代码:
// var img = new Image();
// img.src = 'client/img/spaceship.jpg';
// ctx.drawImage(img,0,0);
Img('spaceship',ctx);
drawGrayzonePlanets(ctx,serverObjects);
现在不要介意 3 条注释行。 第一个活动行 Img('spaceship', ctx): 是上面通过 nodejs 使用的 imgImport 函数。 DrawGrayzonePlanets 可以在下面看到:
function drawGrayzonePlanets(ctx,serverObjects){
for(object in serverObjects){
obj = serverObjects[object];
Drawobjects(ctx,obj);
}
}
本质上,上面的函数从服务器获取数据并使用 Drawobjects() 函数绘制行星,如下所示:
function drawObjects(ctx,status){
switch(status.shape){
case "circle":
var status = status.cic;
console.log(status);
ctx.fillStyle = status.color;
ctx.beginPath();
ctx.arc(status.x,status.y,status.planetSize,0,2*Math.PI);
ctx.stroke();
ctx.fill();
break;
}
}
module.exports = drawObjects;
现在,如果我先运行 Img() 函数,然后再运行 drawGrayzonePlanets() 函数,行星将被绘制在背景后面,这意味着它们无法被看到。 如果我更改代码的顺序,也会发生同样的情况,这很明显。 现在我找到了通过取消注释 3 行并注释掉 img() 函数来解决这个问题的方法。 并保留 drawGrayzonePlanets() 函数。 像这样:
var img = new Image();
img.src = 'client/img/spaceship.jpg';
ctx.drawImage(img,0,0);
//Img('spaceship',ctx);
drawGrayzonePlanets(ctx,serverObjects);
上面的代码有效,行星将被绘制在背景上。 但我只是不明白为什么该方法有效,而不仅仅是仅使用 Img() 函数。 它可能与 img.onload = function(){} 有关,但我不明白为什么?
有人可以解释实际发生的事情吗?
在您的第一个代码中,您正在等待背景完成加载,然后绘制它。 这显然晚于其他图像的绘制。 在您的第二个代码中,您不是在等待加载。 最好的解决方案是回调:
function imgImport(imgName,ctx,callback){
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
callback();
};
img.src = 'client/img/' + imgName + '.jpg';
}
比这样使用:
Img('spaceship',ctx,function(){
alert("bckground loading finished. Continue loading...");
drawGrayzonePlanets(ctx,serverObjects);
});
因为你的 imgImport 是一个异步函数。 img.onload
的代码在图像加载后运行 - 但当图像仍在加载时,其余代码将运行,绘制行星。 然后,过了一会儿,图像到达并将其绘制在上面。
例如,您可以为 imgImport 函数提供第三个回调参数并在那里运行其余代码:
function imgImport(imgName,ctx,callback){
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
callback()
};
img.src = 'client/img/' + imgName + '.jpg';
}
并像这样执行它:
Img('spaceship',ctx,function() {
drawGrayzonePlanets(ctx,serverObjects);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.