我有一个蓝色圆圈,它围绕红色圆圈旋转,只要按下按钮,它就会在画布上向一个方向连续移动。
现在我想用红色圆圈在按下按钮时移动时绘制(跟踪其路径)。 问题:
当我尝试通过不使用 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>
答案 0 :(得分:0)
您需要做的就是使用蓝色圆圈的位置和尺寸调用 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);