淡出HTML5画布中的文本效果
[英]Fade out effect for text in HTML5 canvas
问题描述
我使用以下方法在HTML5画布中绘制简单文本：
context.fillStyle = "#FF0000"
context.font = "italic 20pt Arial";
context.fillText("sfddsfs", 50, 50);
现在我想要淡出本文的动画。 怎么办？
编辑：我知道目前还没有准备好的方法来做到这一点（至少我找不到任何东西）。 我是图形编程的菜鸟，但想学习，所以任何关于从哪里开始的提示都表示赞赏。
也许就像将文本放在自己的画布上并改变画布的globalAlpha ......？ 但画布的背景必须是透明的。 并且不了解性能，有很多小标签出现和消失，到处都需要淡出。
3 个解决方案
解决方案1
13 已采纳 2012-03-29 20:56:26
如果使用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');
解决方案2
0 2012-03-29 20:40:22
没有内置的解决方案。 您必须通过单独绘制每个帧来执行动画（淡入淡出）：
设置一些计时功能，计算＃FF0000和背景颜色之间的渐变，并反复重绘文本，直到达到背景颜色。
解决方案3
0 2012-03-29 20:53:17
我想我明白了。 忘记提到我已经有一个渲染循环和文本对象，每个框架在画布上绘制自己。
所以解决方案是将alpha变量添加到文本对象：
this.alpha = 1;
每个x帧或时间减少一点。
并在渲染循环中：
context.globalAlpha = textObject.alpha;
//draw the text
context.globalAlpha = 1;
淡出带有背景图像的HTML5画布中的线条效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.