Question

我正在使用<canvas>为类项目做一个跳棋板。出于某种原因，我的画布以偏移开始，我无法修复它。 enter image description here

我不想发布很多代码，因为这是一项家庭作业，我不希望别人为我解决。我确实尝试放<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，但它没有用。我基本上做的是嵌套for循环的i和j从0到8。我正在改变基于偶数/奇数位置的颜色。在我决定了我的颜色后，我正在做ctx.fillRect(i*50 ,j*50,50,50)

这种偏移可以来自哪里？感谢

Answer 1

帆布的尺寸是400 x 400吗？是否有一个容器拿着画布的背景为灰色（＃808080）？

如果是这样，这是一个CSS问题。尝试给画布一种漂浮的风格：左。或者将画布绝对定位在它的容器中。

<canvas width="400" height="400" style="float:left"></canvas>

或

<div style="position:relative"><!-- containing element -->
    <canvas width="400" height="400" style="top:0; left:0;position:absolute">
    </canvas>
</div>

画布有一个偏移量

1 个答案: