时间戳

首页 > 解决方案 > 使用 rect() 方法填充两种颜色

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

问题描述

我试图制作两种不同颜色的不同形状，但它不起作用。两种形状都是相同的颜色。请帮忙！（请注意，我不是世界上最好的程序员）

我在这个网站上寻找了其他示例，但它们都使用 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);

标签： javascriptcanvas

解决方案

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

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

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

如果你仍然想使用 rect() 你应该告诉画布为每个桨开始一个新的路径。

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()来执行动画循环，因为它在间隔内提供了许多性能改进。

推荐阅读