Question

我无法使用我正在使用的HTML5画布动画实现我想要的结果。

基本上，我要做的就是逐渐让“旧”星星在它们停止移动时消失，否则画布就会充满旧星星并变成全白色。

我已经尝试过设置globalAlpha随着时间的推移，但我无法弄清楚在哪里放置它，我得到的结果充其量是滑稽的......

或者，如果有人对如何实现这种效果有更好的想法，我会全力以赴。谢谢。（原始来源：http://www.professorcloud.com/mainsite/canvas-nebula.htm）

这是代码：

(function ($) {         
        // The canvas element we are drawing into.      
        var $canvas = $('#canvas');
        var $canvas2 = $('#canvas2');
        var $canvas3 = $('#canvas3');           
        var ctx2 = $canvas2[0].getContext('2d');
        var ctx = $canvas[0].getContext('2d');
        var w = $canvas[0].width, h = $canvas[0].height;        
        var img = new Image();  

        // A puff.
        var Puff = function(p) {                
            var opacity,
                sy = (Math.random()*285)>>0,
                sx = (Math.random()*285)>>0;

            this.p = p;

            this.move = function(timeFac) {                     
                p = this.p + 0.3 * timeFac;             
                opacity = (Math.sin(p*0.05)*0.5);                       
                if(opacity <0) {
                    p = opacity = 0;
                    sy = (Math.random()*285)>>0;
                    sx = (Math.random()*285)>>0;
                }                                               
                this.p = p;                                                                         
                ctx.globalAlpha = opacity;                      
                ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);                             
            };
        };

        var puffs = [];         
        var sortPuff = function(p1,p2) { return p1.p-p2.p; };   
        puffs.push( new Puff(0) );
        puffs.push( new Puff(20) );
        puffs.push( new Puff(40) );

        var newTime, oldTime = 0, timeFac;

        var loop = function()
        {                               
            newTime = new Date().getTime();             
            if(oldTime === 0 ) {
                oldTime=newTime;
            }
            timeFac = (newTime-oldTime) * 0.1;
            if(timeFac>3) {timeFac=3;}
            oldTime = newTime;                      
            puffs.sort(sortPuff);                           

            for(var i=0;i<puffs.length;i++)
            {
                puffs[i].move(timeFac); 
            }                   
            ctx2.drawImage( $canvas[0] ,0,0,570,570);               
            setTimeout(loop, 10 );              
        };
        // Turns out Chrome is much faster doing bitmap work if the bitmap is in an existing canvas rather
        // than an IMG, VIDEO etc. So draw the big nebula image into canvas3
        var $canvas3 = $('#canvas3');
        var ctx3 = $canvas3[0].getContext('2d');
        $(img).bind('load',null, function() {  ctx3.drawImage(img, 0,0, 570, 570);  loop(); });
        img.src = 'blocks.png';

})(jQuery);

Answer 1

我没有完成所有代码，因此您必须根据需要采用此效果，但只需使用透明颜色填充画布，即可制作简单的拖尾效果（如果这就是您所追求的效果）

例如：

/// this will create a "fading" / trailing effect
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';   /// black with high transparency
ctx.fillRect(0, 0, ctx2.canvas.width, ctx2.canvas.height);

ctx.drawImage($canvas3[0], sy+p, sy+p, 285-(p*2),285-(p*2), 0,0, w, h);

（如果你不使用其他填充样式而不是每次都使用其他填充样式，则可以在循环外设置填充样式。当然应该缓存宽度和高度。）

<强> Modified fiddle here

HTML5 Canvas在某些元素上的不透明度？（jQuery的）

1 个答案:

HTML5 Canvas在某些元素上的不透明度？ （jQuery的）

1 个答案:

HTML5 Canvas在某些元素上的不透明度？（jQuery的）