javascript - 使用 rect() 方法填充两种颜色

Question

我试图制作两种不同颜色的不同形状，但它不起作用。两个形状的颜色相同。请帮忙!(请注意，我不是世界上最好的编码员)

我在这个网站上查找了其他示例，但它们都使用了 lineTo() 方法，我想使用 rect() 方法只是为了让事情变得更容易。

//make canvas and set it up
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.style.position = 'absolute';
canvas.style.left = '0px';
canvas.style.top = '0px';
canvas.style.backgroundColor = '#D0C6C6';
var cH = canvas.height;
var cW = canvas.width;

//draw paddles

//variables
var paddleLength = 120;
var redPaddleY = window.innerHeight / 2;
var bluePaddleY = window.innerHeight / 2;
var paddleWidth = 20;
//drawing starts
function drawPaddles() {
    //RED PADDLE
    var redPaddle = function(color) {
    ctx.fillStyle = color;
    ctx.clearRect(0, 0, cW, cH);
    ctx.rect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
    ctx.fill();
    };
    //BLUE PADDLE
    var bluePaddle = function(color) {
    ctx.fillStyle = color;
    ctx.clearRect(0, 0, cW, cH);
    ctx.rect(cH / 12 * 14, bluePaddleY - paddleLength / 2, paddleWidth, paddleLength);
    ctx.fill();
    };
    redPaddle('red');
    bluePaddle('blue');
};
var interval = setInterval(drawPaddles, 25);

Answer 1

每当您将形状添加到 Canvas 时，它就会成为当前路径的一部分。当前路径保持打开状态，直到您使用 beginPath() 告诉 Canvas 开始新路径。这意味着当您添加第二个 rect() 时，它会与第一个 rect() 组合并填充相同的颜色。

最简单的解决方法是使用 fillRect() 函数而不是 rect，它可以在一次调用中开始、关闭并填充路径。

var redPaddle = function(color) {
  ctx.fillStyle = color;
  ctx.fillRect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
};

如果您仍然想使用 rect()，您应该告诉 Canvas 为每个桨开始一条新路径。

var redPaddle = function(color) {
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.rect(cH / 12, redPaddleY - paddleLength / 2, paddleWidth, paddleLength);
  ctx.fill();
};

我还建议将clearRect()移到绘图函数之外。每帧清除一次并绘制两个桨。

...    
ctx.clearRect(0, 0, cW, cH);
redPaddle();
bluePaddle();
...

您还应该调查requestAnimationFrame()进行动画循环，因为它可以在时间间隔内提供许多性能改进。