HTML5 画布中文本的淡出效果
Posted
技术标签:
【中文标题】HTML5 画布中文本的淡出效果【英文标题】：Fade out effect for text in HTML5 canvas 【发布时间】：2012-04-13 13:03:08 【问题描述】：我正在 html5 画布中使用这个来绘制简单的文本：
context.fillStyle = "#FF0000"
context.font = "italic 20pt Arial";
context.fillText("sfddsfs", 50, 50);
现在我想动画淡出这个文本。怎么可能？
编辑：我知道目前没有现成的方法可以做到这一点（至少我找不到任何东西）。我是图形编程的菜鸟，但想学习，所以任何关于从哪里开始的提示都非常感谢。
也许类似于将文本放在自己的画布中并更改画布的 globalAlpha ......？但是画布的背景必须是透明的。并且不了解性能，到处都有很多小标签出现和消失，需要淡出。
【问题讨论】：
jQuery 动画见这里：***.com/questions/5333156/… 【参考方案1】：如果您使用 rgba() 符号来设置 fillStyle 而不是十六进制符号会更容易。这是一个工作示例 (demo)：
// Create a canvas element and append it to <body>
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
document.body.appendChild(canvas);
function fadeOut(text)
var alpha = 1.0, // full opacity
interval = setInterval(function ()
canvas.width = canvas.width; // Clears the canvas
context.fillStyle = "rgba(255, 0, 0, " + alpha + ")";
context.font = "italic 20pt Arial";
context.fillText(text, 50, 50);
alpha = alpha - 0.05; // decrease opacity (fade out)
if (alpha < 0)
canvas.width = canvas.width;
clearInterval(interval);
, 50);
fadeOut('sfddsfs');
【讨论】：
很好的答案，但我会先尝试使用动画帧然后回退到 setInterval：w3.org/TR/animation-timing 您每次都在清除画布以制作动画，但是如果我已经在画布上绘制了一些绘图怎么办？例如。看到这个->jsfiddle.net/dlinx/EhD7J/305 在您的情况下，您可以使用 clearRect(...) 每次清除特定于褪色文本的区域，但如果有一些重叠，您只需重新绘制另一个元素的正确顺序。编辑：w3schools.com/tags/canvas_clearrect.asp【参考方案2】：我想我明白了。忘了提到我已经有一个渲染循环和文本对象，它们在每一帧都在画布上绘制自己。
所以解决方案是给文本对象添加 alpha 变量：
this.alpha = 1;
并且每 x 帧或时间会减少一点。
在渲染循环中：
context.globalAlpha = textObject.alpha;
//draw the text
context.globalAlpha = 1;
【讨论】：
【参考方案3】：对此没有内置解决方案。您必须通过单独绘制每一帧来制作动画（淡入淡出）：
设置一些计时函数，计算#FF0000和背景颜色之间的渐变，并一遍又一遍地重绘文本，直到达到背景颜色。
【讨论】：
以上是关于HTML5 画布中文本的淡出效果的主要内容，如果未能解决你的问题，请参考以下文章