Question

对于Canvas，我是新手。但是，我不能选择不使用它。

单击“免责声明”后，形状的底部位会动画显示。它与不同的画布不同，顶部有微弱的线条。两种情况下的线都是通过用alpha填充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)
        }

    }
}
}

canvas tile .png在动画期间失去不透明度

0 个答案: