4

我刚开始使用 Javascript 和 HTML5，所以我很可能犯了一些非常愚蠢的错误。事实上，我希望这就是全部，并且这是一个简单的解决方法。

这是我得到的输出：

奇怪，错误的图像（自己试试吧！）

我想要发生的只是在灰色矩形上绘制一个蓝色矩形，两种颜色都是它们自己的东西。我真的很困惑为什么这种混合是默认设置（在我的机器上使用 Chrome）。

这是最小的工作示例（再次，对于我的机器）：

(html)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Simple Canvas Game</title>
    </head>
    <body>
        <script src="js/game.js"></script>
    </body>
</html>

（javascript，这是game.js）

//set up the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Draw everything
var render = function () {
    ctx.clearRect(50, 50, 100, 100);

    ctx.fillStyle = "rgb(240, 240, 240)";
    ctx.fillRect(0, 0, 100, 100);

    ctx.strokeStyle="rgb(0, 0, 255)";
    ctx.strokeRect(20,20,150,100);
}

setInterval(render, 10);
4

2 回答 2

9

这不是混合，只是描边是 1 个像素宽，画布中的坐标是正方形的坐标，而线条在正方形之间。您的线条在像素之间移动并且是抗锯齿的。如果您希望您的笔画与像素对齐，您需要使用像 (99.5,99.5) 这样的坐标，而不是 (100,100)。很难描述，但有很多可用的文档。

长话短说，您必须将整个绘图代码翻译 0.5,0.5。尝试类似：

ctx.save();
ctx.translate(0.5,0.5);

ctx.clearRect(50, 50, 100, 100);

ctx.fillStyle = "rgb(240, 240, 240)";
ctx.fillRect(0, 0, 100, 100);

ctx.strokeStyle="rgb(0, 0, 255)";
ctx.strokeRect(20,20,150,100);
ctx.restore();
于 2013-02-09T15:06:11.267 回答
0

检查globalCompositeOperation选项。似乎您已将其设置为"lighter"，而您想要默认值"source-over"。

于 2013-02-09T15:02:34.297 回答