淡出HTML5画布中的文本效果

Question

淡出HTML5画布中的文本效果

Ixx*_*Ixx 8 javascript html5 canvas effects

我使用以下方法在HTML5画布中绘制简单文本:

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

Run Code Online (Sandbox Code Playgroud)

现在我想要淡出本文的动画.怎么办？

编辑:我知道目前还没有准备好的方法来做到这一点(至少我找不到任何东西).我是图形编程的菜鸟,但想学习,所以任何关于从哪里开始的提示都表示赞赏.

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

Answer 1

Ori*_*Ori 13

如果使用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');
?

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，8 月前
查看次数：	21360 次
最近记录：	13 年，8 月前