Question

我刚刚开始使用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);

Answer 1

这不是混合，只是笔画宽度为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();

Answer 2

查看globalCompositeOperation option。您似乎已将其设置为"lighter"，而您需要默认的"source-over"。

为什么Javascript会自动混合我的颜色？

2 个答案: