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畫布繪製位置不正確

回答

相關問題