fillRect()不适用于stroke()

时间:2016-06-10 17:20:54

标签: javascript html5-canvas

我有以下代码:

socket.on('render', function(data) {

world.fromJSON(data);
me.fromJSON(world.getPlayerById(me.id));

// Drawing:
ctx.fillStyle = "#000000";
ctx.fillRect(0,0,world.WIDTH, world.HEIGHT);


camX = clamp(me.x - $canvas.width()/2, 0, world.WIDTH - $canvas.width());
camY = clamp(me.y - $canvas.height()/2, 0, world.HEIGHT - $canvas.height());

ctx.save();
ctx.translate( -camX, -camY );


background.draw(world.WIDTH, world.HEIGHT, ctx);

world.render(ctx);
ctx.restore();

});

和背景看起来像这样:

var Background = function() {

  this.image;

this.draw = function(WIDTH, HEIGHT, ctx) {
    var p = 20;
for (var x = 0; x <= WIDTH; x += 40) {
     ctx.moveTo(0.5 + x + p, p);
     ctx.lineTo(0.5 + x + p, HEIGHT + p);
 }


 for (var x = 0; x <= HEIGHT; x += 40) {
     ctx.moveTo(p, 0.5 + x + p);
     ctx.lineTo(WIDTH + p, 0.5 + x + p);
 }

 ctx.strokeStyle = "white";
 ctx.stroke();
}

}

问题在于笔画不会透露以下内容:

ctx.fillStyle = "#000000";
ctx.fillRect(0,0,world.WIDTH, world.HEIGHT);

我不知道可能导致问题的原因,但它非常烦人。

它看起来像这样 wrong

任何想法如何解决这个问题?

0 个答案:

没有答案