為什么Javascript會自動混合我的顏色？

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選項。 好像你把它設置為"lighter" ，而你想要默認的"source-over" 。

為什么Javascript會自動混合我的顏色？

問題描述

2 個解決方案

解決方案1
6 已采納 2013-02-09 15:06:11

解決方案2
0 2013-02-09 15:02:34

為什么Javascript會自動混合我的顏色？

問題描述

2 個解決方案

解決方案1 6 已采納 2013-02-09 15:06:11

解決方案2 0 2013-02-09 15:02:34

解決方案1
6 已采納 2013-02-09 15:06:11

解決方案2
0 2013-02-09 15:02:34