HTML5 画布中文本的淡出效果答案

【问题标题】：Fade out effect for text in HTML5 canvasHTML5 画布中文本的淡出效果
【发布时间】：2012-04-13 13:03:08
【问题描述】：

我正在 HTML5 画布中使用这个来绘制简单的文本：

context.fillStyle = "#FF0000"
context.font = "italic 20pt Arial";
context.fillText("sfddsfs", 50, 50);

现在我想动画淡出这个文本。怎么可能？

编辑：我知道目前没有现成的方法可以做到这一点（至少我找不到任何东西）。我是图形编程的菜鸟，但想学习，所以任何关于从哪里开始的提示都非常感谢。

也许类似于将文本放在自己的画布中并更改画布的 globalAlpha ......？但是画布的背景必须是透明的。并且不了解性能，到处都有很多小标签出现和消失，需要淡出。

【问题讨论】：

jQuery 动画见这里：stackoverflow.com/questions/5333156/…

标签： javascript html canvas effects

【解决方案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和背景颜色之间的渐变，并一遍又一遍地重绘文本，直到达到背景颜色。

【讨论】：