Question

正如标题所说。我用画布绘制图像（1376x1440），但是当我第一次打开网站时，所有内容都是黑色的，直到刷新然后它才能正常工作并且绘制得很好。

我通过express使用node.js托管网站。

我导入图片的代码

var city_Image = new Image();  
city_Image.src = '/Pictures/city.png' 

var city = map(city_Image.width*2,city_Image.height*2,city_Image,"city",changeTo2DMapArray(city_Array1D,city_Image))

我画的地方

var map = (maxX,maxY,image,name,grid) => {
var self = {
    name:name,
    minX:0,
    minY:0,
    maxX:maxX,
    maxY:maxY,
    image:image,
    grid:grid
}


self.drawMap = function(canvas,ctx){
    ctx.drawImage(self.image,(canvas.width-self.maxX),(canvas.height-self.maxY),self.maxX,self.maxY)  
}
return self;
}

有人有任何想法吗？

编辑：我也有＃34;相机＆＃34;功能我完全不理解

function draw(ctx,canvas,player,world) {
    ctx.setTransform(1,0,0,1,0,0);//reset the transform matrix as it is cumulative
    ctx.clearRect(0, 0, canvas.width, canvas.height);//clear the viewport AFTER the matrix is reset

    //Clamp the camera position to the world bounds while centering the camera around the player                                             
    var camX = clamp(-player.x + canvas.width/2, world.minX,  world.maxX - canvas.width );
    var camY = clamp(-player.y + canvas.height/2, world.minY,  world.maxY - canvas.height);

    ctx.translate( camX, camY );    

    //Draw everything       
    world.drawMap(canvas,ctx)  
    ctx.drawImage(player.sprite,player.x,player.y,64,64)
}

function clamp(value, min, max){
    if(value < min) return min;
    else if(value > max) return max;
    return value;
}

也许这必须用它做点什么？

Answer 1

您应该使用onload事件：

city_Image.onload = function(map(...));

屏幕是黑色的，直到我刷新浏览器

1 个答案: