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

?

總結

以上是生活随笔為你收集整理的html5画布 文本无法显示,淡出HTML5画布中的文本效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。