是否可以使文本在画布中从左到右消失？

Question

我想让画布中的文本从左到右出现和消失。我不知道这是否可能。我尝试使用clip() 函数隐藏文本，但我无法转换剪辑以减小宽度并使文本出现。

ctx.fillStyle = "#1f2f90";
ctx.fillText('This is a text!', 150, 100);

ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();

var i = 200;
setInterval(function(){
	ctx.clearRect(0,0,300,150);
    ctx.rect(50,20,i,120);
    ctx.stroke();
	ctx.clip();
    i++;
},20);

Answer 1

这是一个使用 fillRect 覆盖文本的示例。

let ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = "#1f2f90";
ctx.fillText('This is a text!', 150, 100);

var i = 0;
setInterval(function(){
    ctx.fillStyle = "white";
    ctx.fillRect(50,20,i,120);
    ctx.strokeRect(50, 20, 200, 120);
    i++;
},20);

<canvas id="canvas"></canvas>

Answer 2

我的解决方案不同。每个字母都是一个具有位置和透明度 alpha 的对象。在动画期间，字母的透明度会降低，一次一个字母。

您可以在点击时重新启动动画。 请阅读代码中的cmets。

const canvas = document.getElementById("canvas");
const _canvas = document.getElementById("_canvas");
const ctx = canvas.getContext("2d");
const _ctx = _canvas.getContext("2d");
let cw = canvas.width = _canvas.width = 400,
  cx = cw / 2;
let ch = canvas.height = _canvas.height = 150,
  cy = ch / 2;
  
let rid = null;// request animation id
let theText = 'This is a text!';
let letters = [];// the letters array

let k = 20;// controls the speed of the animation

ctx.font = _ctx.font = "2em Verdana";

// every letter is an object
class Letter{
  constructor(char,x){
    this.char = char;// the letter
    // measure the letter
    _ctx.fillText(this.char, 0, cy);
    this.w = _ctx.measureText(this.char).width;
    //the position of the text
    this.pos = {}
    this.pos.y = cy;
    this.pos.x = x;
    // the transparency of the letter
    this.alpha = 1;
  }
  show(){// draw the letter
    ctx.fillStyle = `rgba(0,0,0,${this.alpha})`;
    ctx.fillText(this.char, this.pos.x, this.pos.y);
  }
  update(){
    //change the transparency of the text
    if(this.alpha > 0){this.alpha -= 1/k;}
    if(this.alpha < 0){this.alpha = 0; index++}
  }
}


let x = 0;

for(l=0; l<theText.length; l++){
  // a new letter object
letters.push(new Letter(theText[l],x))
//calculate the x position of the next letter
x = letters.reduce( function(a, b){return a + b.w}, 0); 
}

// draw all the letters
for(l=0; l<letters.length; l++){letters[l].show()}

// the actual letter. 
let index = 0;

function Draw() {
rid = window.requestAnimationFrame(Draw);
ctx.clearRect(0,0,cw,ch);
letters[index].update();//change the transparency of the actual letter
// draw all the letters
for(l=0; l<letters.length; l++){letters[l].show()}
// if the last letter is fully transparent stop the animation
if(letters[letters.length - 1].alpha <= 0){
  window.cancelAnimationFrame(rid);rid = null;
}
}
Draw();

//resume animation on click
canvas.addEventListener("click",()=>{
if(rid){window.cancelAnimationFrame(rid);rid = null;}
  index = 0;
  for(l=0; l<letters.length; l++){letters[l].alpha = 1;letters[l].show()}
  Draw();
})

#_canvas{display:none;}
canvas {
  border:1px solid;
}

<canvas id="canvas"></canvas>
<canvas id="_canvas"></canvas>