Javascript 画布HTML填充文本字母以不仅设置阴影动画

只希望阴影设置动画并防止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启动；
var j=0；
var makeText=function（）{
j+=1
ctx.shadowColor='红色'；
ctx.shadowOffsetX=j；//设置动画
ctx.shadowOffsetY=j；//设置动画
ctx.globalAlpha=0.5；
ctx.font=“48px serif”；
ctx.fillStyle=“黑色”；
fillText（'hey you'，width/2，height/2）；//只运行一次
//不要像素化！
}
函数animateText（时间戳）{
var runtime=时间戳-开始；
var progress=Math.min（运行时/1400,1）；
生成文本（进度）
如果（进度<1）{
requestAnimationFrame（animateText）
}否则{
返回；
}
}
requestAnimationFrame（函数（时间戳）{
开始=时间戳；
animateText（时间戳）
})

---

只需绘制自己的阴影，下面是一个示例：

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=函数（）{
ctx.globalAlpha=1；
ctx.fillStyle=“黑色”；
ctx.fillText（base.text，base.x，base.y）；
}
var makeshadow=函数（偏移量）{
ctx.fillStyle=“红色”；
对于（变量i=0；i35 | | j<3）inc*=-1
}
setInterval（animateText，50）

您的主要问题（文本像素化）是由于您没有清除每个帧之间的画布，并在同一位置上反复绘制。由抗锯齿创建的半透明像素混合到越来越多的不透明像素

但在你的情况下，你似乎真的希望至少阴影像这样混在一起

要做到这一点，一种方法是只绘制一次普通文本，并且能够绘制当前图形后面的阴影

---

仅绘制形状的阴影。 仅绘制形状阴影的一个技巧是将阴影偏移设置为该位置的倒数，从可见视口中绘制形状

var text='foo bar'；
var ctx=canvas.getContext（'2d'）；
原始变量x=20；//本来应该是这样的
ctx.font='30px无衬线'；
var targetPosition=ctx.measureText（text）.width+original_x+2；
//默认阴影设置
ctx.shadowColor='红色'；
ctx.shadowBlur=3；
//只是为了证明发生了什么
var x=0；
动漫（）；
函数anim（）{
如果（++x>=targetPosition）{
x=0；
返回；
}
//如果我们不展示动画，我们会使用“targetPosition”
//而不是“x”
ctx.shadowOffsetX=x；
clearRect（0,0，canvas.width，canvas.height）；
ctx.fillText（文本，-x+原件x，30）；
请求动画帧（anim）；
}
//单击后重新启动动画
onclick=function（）{
如果（x==0）anim（）；
};
我就知道事情会这么简单。杰出@BradVanderbush我很高兴你看到它很简单，一旦你知道如何绘制阴影，你就可以打开大门获得更高级的效果如果（j>35 | | j<3）inc*=-1简单而出色，我必须对它进行控制台。记录它以准确地了解它是如何形成一个循环的。@BradVanderbush我很高兴你喜欢它，我还为globalAlpha添加了一些效果，使它看起来像是阴影正在消失。我的想法是在它后面画。首先是Filltext（），然后是ctx.globalCompositeOperation='destination over'；防止在其上绘制任何东西？@BradVanderbush yes destination over意味着已经绘制的任何不透明像素都将覆盖在新像素上，或者更简单地说，下一个绘制将在后面完成。