html5画布绘制位置不正确

我目前正在写一个简单的蛇游戏。
http://jsfiddle.net/jhGq4/3/
我开始绘制网格背景
html5画布绘制位置不正确

function fill_grid() { 
    ctx.beginPath(); 
    var row_no = w/cw; 
    var col_no = h/cw; 
    for (var i=0;i<row_no;i++) 
    { 
     for (var j=0;j<col_no;j++) 
     { 
      ctx.rect(i*cw, j*cw, (i+1)*cw, (j+1)*cw); 
      ctx.fillStyle = 'black'; 
      ctx.fill(); 
      ctx.lineWidth = 1; 
      ctx.strokeStyle = '#135d80'; 
      ctx.stroke(); 
     } 
    } 

}

它的伟大工程，但是当我画蛇，位置得到错误的，长度增加了一倍。我试图console.log我的蛇的x位置，但它们是正确的。

function paint_cell(x, y) 
{ 
    console.log(x*cw); 
    console.log((x+1)*cw); 
    ctx.fillStyle = '#fff799'; 
    ctx.fillRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = '#135d80'; 
    ctx.strokeRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw); 
}

***因为有人想学习如何做一个蛇游戏，这是我为这场比赛最终的解决方案。您可以访问我的网站玩：

使用WSAD玩。 http://www.catoyeung.com/snake2/single.php ：d

来源

2013-05-11 Cato Yeung

+1用于发布非常整洁的jsFiddle。这就是帮助我解决问题的方法。 – boisvert 2013-05-11 14:27:49

@ user985874。解决方案似乎解决。你可以更新jsfiddle，以便我们也可以看到蛇并学习HTML5 – 2013-05-11 14:37:10

@ user985874，当然，我只是在这里发布了我的最终解决方案，http://jsfiddle.net/wd9z9/ – 2013-05-14 07:59:08

我测试此替代init函数：

function init() 
{ 
     fill_grid(); 
     // create_snake1(); 
     // paint_snake1(); 
     paint_cell(5, 5) 
}

哪个描绘开始COORDS（5,5）的正方形，但大小6x6的的。

我相信你滥用fillRect（）方法。使用

 ctx.fillRect(x*cw, y*cw, cw, cw);

而不是

 ctx.fillRect(x*cw, y*cw, (x+1)*cw, (y+1)*cw);

同样可能适用于strokeRect。

顺便提一句，我在看你的网格填充功能。你填充i * j个相邻的方块，这是可行的，但你真的只需要我垂直线和j个水平线 - 这是一个很少的处理。用更少的计算运行更快的循环：

function fill_grid() { 
     ctx.beginPath(); 
     ctx.fillStyle = 'black'; 
     ctx.fillRect(0,0,w,h); 
     for (var i=0;i<=h;i+=cw) 
     { 
      ctx.moveTo(0,i); 
      ctx.lineTo(w,i); 
      ctx.moveTo(i,0); 
      ctx.lineTo(i,h); 
     } 
     ctx.stroke(); 
    }

我只会在初始化画布时定义线宽和笔触颜色一次。当然，你可能不需要担心这一点。但是，如果经常刷新网格来为蛇制作动画，这种护理可能会有所帮助。

来源

2013-05-11 14:26:29 boisvert

html5画布绘制位置不正确

回答

相关问题