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
答
我测试此替代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();
}
我只会在初始化画布时定义线宽和笔触颜色一次。当然,你可能不需要担心这一点。但是,如果经常刷新网格来为蛇制作动画,这种护理可能会有所帮助。
+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