Я пытался очистить текст на холсте Javascript в течение нескольких часов, но что бы я ни делал, я не могу найти приемлемое решение.Вещи, которые я пробовал:
- Использование прозрачного прямоугольника для очистки области вокруг текста; проблема : это не достаточно точно для того, что я хочу.
- Установка цвета текста на цвет фона и написание текста; проблема : ход не полностью очищен.После долгих страданий я обнаружил, что вы можете отрегулировать ширину линии холста, чтобы увеличить обводку, но даже это не работает 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>