HTML5画布中实现文字淡出效果

Question

HTML5画布中实现文字淡出效果

8

我正在使用以下代码在HTML5画布上绘制简单文本：

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

现在我想要对这段文字进行淡出动画。如何实现？

编辑：我知道目前没有现成的方法可以做到这一点（至少我找不到）。我是一个图形编程方面的新手，但希望学习，所以任何关于从哪里开始的提示都会很受欢迎。

也许可以将文本放入自己的画布中，并改变画布的globalAlpha...？但画布的背景必须是透明的。而且不知道性能如何，有很多小标签出现和消失，需要淡出。

- User

jQuery动画请参见： https://dev59.com/c1XTa4cB1Zd3GeqP0Eve - Chris Morley

3个回答

2

我明白了。忘了提到我已经有一个渲染循环和文本对象，它们会在每一帧绘制在画布上。

因此，解决方案是向文本对象添加alpha变量：

this.alpha = 1;

每隔x帧或时间，将其稍微减少一点。

在渲染循环中：

context.globalAlpha = textObject.alpha;
//draw the text
context.globalAlpha = 1;

- User

0

这个问题没有内置的解决方案。您必须通过逐帧绘制来执行动画（淡入淡出）：

设置一些计时函数，计算#FF0000和背景颜色之间的渐变，并不断重新绘制文本，直到达到背景颜色。

- stewe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ori · Accepted Answer

使用rgba()表示法设置fillStyle比使用十六进制表示法更容易。这是一个可工作的示例(演示):

// 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');