Question

我有一个蓝色圆圈，它围绕红色圆圈旋转，只要按下按钮，它就会在画布上向一个方向连续移动。

现在我想用红色圆圈在按下按钮时移动时绘制（跟踪其路径）。问题：

当我尝试通过不使用 clearRect(0,0, canvas.width, canvas.height) 在画布上绘图时；蓝色圆圈在移动时也开始在画布上绘制，这是我不需要的。是否可以在同一个画布上用一个圆圈绘制而不用另一个圆圈绘制？

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let positionX = 100;
let positionY = 100;
let X = 50;
let Y = 50;
let angle = 0;
let mouseButtonDown = false;

document.addEventListener('mousedown', () => mouseButtonDown = true);
document.addEventListener('mouseup', () => mouseButtonDown = false);

function circle(){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, 20, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
}
function direction(){
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(positionX + X, positionY + Y, 10, 0, Math.PI*2);
    ctx.closePath();
    positionX = 35 * Math.sin(angle);
    positionY = 35 * Math.cos(angle);
    ctx.fill();   
}
function animate(){
    if (mouseButtonDown) {
        X += positionX / 10;
        Y += positionY / 10;
    } else {
        angle += 0.1;
    }
    ctx.clearRect(0,0, canvas.width, canvas.height);
    circle();
    direction();
    requestAnimationFrame(animate);   
}
animate();

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas1"></canvas>
    
    <script src="script.js"></script>
</body>
</html>

Answer 1

您需要做的就是使用蓝色圆圈的位置和尺寸调用 clearRect。

ctx.clearRect(blueCircle.x, blueCircle.y, blueCircle.diameter, blueCircle.diameter);

或者，如果您要在其本地参考系中平移圆，则为：

ctx.clearRect(blueCircle.x - blueCircle.radius, blueCircle.y - blueCircle.radius, blueCircle.diameter, blueCircle.diameter);

如何使用对象在画布上绘制并在不绘制的情况下移动对象？

1 个答案: