Question

我一直在尝试清除Javascript画布上的文本达数小时之久，但是无论如何我都无法获得可接受的解决方案。我尝试过的事情：

使用clear rect清除文本周围的区域；问题：这对于我想要的不够精确。
将文本的颜色设置为背景的颜色并覆盖文本；问题：未完全清除笔划。经历了很多苦难之后，我发现您可以调整画布的线宽以使笔划变大，但即使这样也无法100％工作
仅使用笔触文本而没有填充。问题：尽管我可能做错了，但似乎没有用，老实说，即使它能用，也看起来不太好。
将文本的颜色设置为背景的颜色并覆盖文本，但这一次要复制并粘贴相同的代码行多次。问题：这可能是我找到的最接近实际工作解决方案的方法，但这似乎并不正确，因为当我说自己时我并没有夸大其词我多次使用完全相同的代码行。这似乎意味着每次我运行该行代码时，我都会得到不同的结果。总体而言，使用此方法作为解决方案可能会好起来，但是我觉得它最终可能会减慢我的代码的速度，所以我宁愿将此作为最后的选择。

我基于https://codepen.io/doms/pen/BZLezr编写了这段代码，并尝试不使用p5.js来执行此操作。无论如何，在这一点上，我感到更加烦恼的是，很难清除文本，因为我以我能想到的许多不同方式来搜索该问题，但一直未能找到解决方案。我已在下面附上我的代码以供参考。

class Particle {
	constructor() {
		this.x = 0;
		this.y = 0;
		this.speed = 1;
		this.width = 30;
		this.font = this.width + "px monospace"
		this.residue = [];
		this.reset();
	}

	reset() {
		this.x = Math.random() * innerWidth;
		this.y = (Math.random() * 10) + 10;
		this.width = (Math.random() * 20) + 10;
		this.font = this.width + "px monospace"

		this.speed = (Math.random() * 0.8) + 0.4;
	}

	update() {
		if (this.y > (innerHeight + this.width)) {
			this.reset();
		}

		this.y += this.speed * 12;
	}

	draw() {

		ctx.font = this.font;
		ctx.fillStyle = "black";
		for (let i = 0; i < 1; i++){
			if (this.residue.length > 0){
				let tempY = this.residue.pop();
				let tempChar = this.residue.pop();

				ctx.lineWidth = 4;
				ctx.strokeStyle = "black";
				ctx.strokeText(tempChar, this.x, tempY);
				ctx.fillText(tempChar, this.x, tempY);

			}
		}
		
		ctx.font = this.font;
		ctx.fillStyle = "lime";
		for (let i = 0; i < 1; i++){
			let char = String.fromCharCode(Math.floor((Math.random() * 109) + 33));
			this.residue.push(char);
			this.residue.push(this.y);

			ctx.lineWidth = 1;
			ctx.fillText(char, this.x, this.y - (this.width * 0));
		}
	}
}

var run = true;
var particles = [];
var canvas = document.createElement('canvas');
var body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);
var ctx = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;

setInterval(this.draw, 100);


function draw() {

	document.body.onkeyup = function(e){
    	if(e.key == 'f'){
    		run = !run;
    	}
    }

	if (!run){
		return;
	}

	if (particles.length < 120) {
		particles.push(new Particle());
	}

	for (let i = 0; i < particles.length; i++){
		particles[i].draw();
		particles[i].update()
	}
}

html, body {
  margin: 0;
  overflow: hidden;
}

body {
  background: black;
}

input {
  position: fixed;
  top: 10px;
  left: 10px;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Matrix Rain</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <script src="js/index.js"></script>
</body>

</html>

清除Javascript画布上的文本

0 个答案: