html5画布 文本无法显示,淡出HTML5画布中的文本效果

Ori..

13

如果使用rgba()表示法来设置fillStyle而不是十六进制表示法,则会更容易.这是一个工作示例(演示):

// Create a canvas element and append it to

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

?