我目前正在尝试创建一个画布，该画布有一个背景和一个围绕鼠标的类似十字线的对象，除了十字线仍然显示它之前绘制的位置外，其他一切都可以工作。如果画布上的所有内容都没有被清除，我不确定在哪里可以清除画布，而不显示在这里是我的代码。
canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
class Background {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawBackground() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
const backgroundSky = new Background(0, 0, canvas.width, canvas.height, "#89CFF0");
const backgroundGrass = new Background(0, canvas.height/1.2,canvas.width, canvas.height, "green");
backgroundSky.drawBackground();
backgroundGrass.drawBackground();
class Lens {
constructor(x, y, radius, color) {
this.x = x,
this.y = y,
this.radius = radius,
this.color = color
}
drawLens() {
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fillStyle = this.color;
ctx.fill();
}
}
class Cross {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawCross() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
const crossX = new Cross(mouseX, 0, 10, canvas.height, "black");
const crossY = new Cross(0, mouseY, canvas.width, 10, "black");
const lens = new Lens(mouseX, mouseY, 250, "transparent");
crossX.drawCross();
crossY.drawCross();
lens.drawLens();
});* {
margin: 0;
overflow:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="index.js" async defer></script>
</body>
</html>清除整个屏幕并按帧重新绘制：
ctx.clearRect(0, 0, canvas.width, canvas.height);
backgroundSky.drawBackground();
backgroundGrass.drawBackground();
crossX.drawCross();
crossY.drawCross();
lens.drawLens();
完整代码：
canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
class Background {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawBackground() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
const backgroundSky = new Background(0, 0, canvas.width, canvas.height, "#89CFF0");
const backgroundGrass = new Background(0, canvas.height/1.2,canvas.width, canvas.height, "green");
class Lens {
constructor(x, y, radius, color) {
this.x = x,
this.y = y,
this.radius = radius,
this.color = color
}
drawLens() {
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fillStyle = this.color;
ctx.fill();
}
}
class Cross {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawCross() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
const crossX = new Cross(mouseX, 0, 10, canvas.height, "black");
const crossY = new Cross(0, mouseY, canvas.width, 10, "black");
const lens = new Lens(mouseX, mouseY, 250, "transparent");
ctx.clearRect(0, 0, canvas.width, canvas.height);
backgroundSky.drawBackground();
backgroundGrass.drawBackground();
crossX.drawCross();
crossY.drawCross();
lens.drawLens();
});* {
margin: 0;
overflow:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="index.js" async defer></script>
</body>
</html>您可以在绘制十字线之前重新绘制背景。
您的mousemove事件侦听器函数将变为：
addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
const crossX = new Cross(mouseX, 0, 10, canvas.height, "black");
const crossY = new Cross(0, mouseY, canvas.width, 10, "black");
const lens = new Lens(mouseX, mouseY, 250, "transparent");
backgroundSky.drawBackground(); // ⚠️
backgroundGrass.drawBackground(); // ⚠️
crossX.drawCross();
crossY.drawCross();
lens.drawLens();
});
canvas = document.querySelector("canvas");
ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
class Background {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawBackground() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
const backgroundSky = new Background(0, 0, canvas.width, canvas.height, "#89CFF0");
const backgroundGrass = new Background(0, canvas.height/1.2,canvas.width, canvas.height, "green");
backgroundSky.drawBackground();
backgroundGrass.drawBackground();
class Lens {
constructor(x, y, radius, color) {
this.x = x,
this.y = y,
this.radius = radius,
this.color = color
}
drawLens() {
ctx.lineWidth = 10;
ctx.strokeStyle = "black";
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
ctx.stroke();
ctx.fillStyle = this.color;
ctx.fill();
}
}
class Cross {
constructor(x, y, width, height, color) {
this.x = x,
this.y = y,
this.width = width,
this.height = height,
this.color = color
}
drawCross() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
addEventListener("mousemove", function(event) {
mouseX = event.clientX;
mouseY = event.clientY;
const crossX = new Cross(mouseX, 0, 10, canvas.height, "black");
const crossY = new Cross(0, mouseY, canvas.width, 10, "black");
const lens = new Lens(mouseX, mouseY, 250, "transparent");
backgroundSky.drawBackground(); // ⚠️
backgroundGrass.drawBackground(); // ⚠️
crossX.drawCross();
crossY.drawCross();
lens.drawLens();
});* {
margin: 0;
overflow:hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="index.js" async defer></script>
</body>
</html>