Эффект затухания для текста на холсте HTML5 - PullRequest
Новая
       35

Эффект затухания для текста на холсте HTML5

8 голосов
/ 30 марта 2012

Я рисую простой текст на холсте HTML5, используя это: 

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

Теперь я хочу анимировать исчезновение из этого текста.Как это можно сделать?

Редактировать: я знаю, что в настоящее время нет готового способа сделать это (по крайней мере, я ничего не могу найти).Я новичок в графическом программировании, но хочу учиться, поэтому приветствуется любой намек о том, с чего начать.

Может быть, что-то вроде помещения текста в собственный холст и изменения globalAlpha холста ...?Но фон холста должен быть прозрачным.И не знаю о производительности, есть много маленьких ярлыков, появляющихся и исчезающих повсюду, которые нужно потушить.

Ответы [ 3 ]

13 голосов
/ 30 марта 2012

Проще, если вы используете нотацию rgba () для установки fillStyle вместо шестнадцатеричной нотации.Вот рабочий пример ( demo ): 

// 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');
​
0 голосов
/ 30 марта 2012

Я думаю, что понял. Забыл упомянуть, что у меня уже есть цикл рендеринга и текстовые объекты, которые рисуют на холсте каждый кадр.

Таким образом, решение заключается в добавлении альфа-переменной к текстовым объектам: 

this.alpha = 1;

и каждый x кадров или время уменьшают это немного.

и в цикле рендеринга: 

context.globalAlpha = textObject.alpha;
//draw the text
context.globalAlpha = 1;
0 голосов
/ 30 марта 2012

Нет встроенного решения для этого. Вы должны сделать анимацию (исчезнуть), рисуя каждый кадр индивидуально:

Установите некоторую функцию синхронизации, которая вычисляет градиент между # FF0000 и цветом фона и перерисовывает текст снова и снова, пока не будет достигнут цвет фона.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...