gpt4 book ai didi

javascript - 为什么 Javascript 会自动混合我的颜色?

转载 作者:搜寻专家 更新时间:2023-10-31 22:31:58 26 4
gpt4 key购买 nike

我刚开始使用 Javascript 和 HTML5,所以我很可能犯了一些非常愚蠢的错误。事实上,我希望仅此而已,并且这是一个简单的解决方案。

这是我得到的输出:

Weird, wrong image (Try it yourself!)

我想要发生的只是在灰色矩形上绘制一个蓝色矩形,其中两种颜色都是它们自己的东西。老实说,我很困惑为什么这种混合是默认设置(在我的机器上使用 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);

最佳答案

这不是混合,只是描边是1个像素宽,canvas中的坐标是方 block 的坐标,线在方 block 之间。你的线条在像素之间移动并且是抗锯齿的。如果你想让你的笔画与像素对齐,你需要使用像 (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();

关于javascript - 为什么 Javascript 会自动混合我的颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14789339/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com