javascript - Canvas HTML fillText 字母不只动画阴影

Question

只希望阴影动画并防止 fillText 由于字母像素化而动画一遍又一遍。

    var canvas = document.getElementById('canvas')
    var ctx = this.canvas.getContext('2d')
    var width = canvas.width = canvas.scrollWidth
    var height = canvas.height = canvas.scrollHeight
    var start;
    var j=0;
	var makeText = function(){  
	   j+=1 

	   ctx.shadowColor= 'red'; 
       ctx.shadowOffsetX = j;  //animate
	   ctx.shadowOffsetY = j; //animate
	   ctx.globalAlpha=0.5;
	   ctx.font = "48px serif";
       ctx.fillStyle = "black";
       ctx.fillText('hey you', width/2, height / 2); //Only ran once so letters 
                                                     //don't pixelate!
   }
    
    			
	function animateText(timestamp){
		var runtime = timestamp - start;
		var progress = Math.min(runtime / 1400, 1); 
 
		makeText(progress)
				
		if(progress < 1){
			requestAnimationFrame(animateText)
		}else {
			return;
		}
	}
	requestAnimationFrame(function(timestamp){
		start = timestamp;
		animateText(timestamp)
	})
			 

<canvas id="canvas" width=500px height=500px></canvas>

这个过程的结果只会让阴影变得生动，并让字母保持原样

Answer 1

只画自己的影子，这里是一个例子:

var canvas = document.getElementById('canvas')
var ctx = this.canvas.getContext('2d')
ctx.font = "68px serif";
var base = {text: 'hey you', x: 10, y: 60 }
var inc = 2;
var j = 30;

var makeText = function() {
  ctx.globalAlpha = 1;
  ctx.fillStyle = "black";
  ctx.fillText(base.text, base.x, base.y); 
}

var makeshadow = function(offset) {
  ctx.fillStyle = "red";
  for (var i = 0; i < offset; i++) {
    ctx.globalAlpha = 1/i;
    ctx.fillText(base.text, base.x + i, base.y + i);
  }
}

function animateText() {  
  ctx.clearRect(0, 0, 999, 999)
  makeshadow(j);
  makeText();  
  j += inc;
  if (j > 35 || j < 3) inc *= -1
}

setInterval(animateText, 50)

<canvas id="canvas" width=300px height=170px></canvas>

---

如果您在混合中添加一些数学运算，您可以获得一些很酷的效果:

var canvas = document.getElementById('canvas')
var ctx = this.canvas.getContext('2d')
ctx.font = "68px serif";
var base = {text: '123456', x: 30, y: 80 }
var inc = 5;
var j = 0;

var makeText = function() {
  ctx.globalAlpha = 1;
  ctx.fillStyle = "black";
  ctx.fillText(base.text, base.x, base.y); 
}

var makeshadow = function(offset) {
  ctx.globalAlpha = 0.05;
  ctx.fillStyle = "red";
  for (var i = 0; i < offset; i++)
    ctx.fillText(base.text, base.x + Math.sin(i/5)*10, base.y + Math.cos(i/5)*15);
}

function animateText() {  
  ctx.clearRect(0, 0, 999, 999)
  makeshadow(j);
  makeText();  
  j += inc;
  if (j > 120 || j < 0) inc *= -1
}
setInterval(animateText, 50)

<canvas id="canvas" width=300px height=170px></canvas>