холст .png теряет непрозрачность во время анимации - PullRequest
Новая
       26

холст .png теряет непрозрачность во время анимации

0 голосов
/ 07 февраля 2012

Я новичок, когда дело доходит до Canvas. Однако у меня нет выбора не использовать его.

http://cl.ly/3T1M0n3x431V3H330T1G

Нижний бит фигуры оживляется после нажатия кнопки «Отказ от ответственности». Это в другом холсте, чем верхний бит со слабыми линиями. Строки в обоих случаях создаются путем разбиения png на альфа.

Почему непрозрачность изменяется во время анимации, но только иногда?

Вот бит, который оживляет: 

var menu_canvas = {
animator: function(y, targetY, state){

    var canvas = document.getElementById('menu_animator'),
        ctx = canvas.getContext('2d'),
        dy,
        easing =0.5,
        canvas_loop = '';
        state   = (y < targetY) ? 'closed' : 'opened';

    canvas_loop = setInterval(draw,10);

    function draw(){

        // update position
        dy=targetY-y;       //Vertikale afstand
        y+=dy * easing;     // vy=vertikale snelheid

        // clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // draw                    
        var gradient;
        var imageObj = new Image();

            ctx.shadowColor = "rgba(0, 0, 0, 0.75)";
            ctx.shadowOffsetX = 5.0;
            ctx.shadowOffsetY = 5.0;
            ctx.shadowBlur = 20.0;
            ctx.beginPath();
            ctx.lineTo(294, y-50);
            ctx.lineTo(294, y-22);
            // ... here rest of shape is drawn ...
            ctx.lineTo(25, y-22);
            ctx.lineTo(25, y-50);
            ctx.closePath();
            gradient = ctx.createLinearGradient(0, 77, 0, 175);
            gradient.addColorStop(0, "#e923ac");
            gradient.addColorStop(1, "#f7069e");
            ctx.fillStyle = gradient;
            ctx.fill();

            imageObj.onload = function(){
            var pattern = ctx.createPattern(imageObj, "repeat");

            ctx.fillStyle = pattern;
            ctx.fill();
        };
        imageObj.src = "cdn/gfx/bg_tile.png";

        if ((state == 'opened' && y < (targetY + 0.5)) || (state == 'closed' && y > (targetY - 0.5))) {
            clearInterval(canvas_loop)
        }

    }
}
}
...