淡入 canvas 个元素无法正常工作

Question

我正在尝试解决这个问题，但我无法弄清楚。基本上我想创建一堆一个一个地淡入淡出的三角形（现在我只有一个三角形，因为我还在测试它所以添加一堆 triangles/lines 没有意义）。为此，我使用了 setInterval 方法。

//Canvas
var position = 0;
var canvas1 = document.getElementById("canvas-1");
var ctx = canvas1.getContext("2d");
var triangles=[];
var time;
function Triangle(x1,y1,x2,y2,x3,y3,alpha){
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.x3 = x3;
    this.y3 = y3;
    this.alpha = alpha;
}
function alphatime(a){
    if(time > 100) {
        return 1;
    }
    else {
        return time / 100;
    }
}
triangles.push(new Triangle(0,0,100,100,300,150,0));
function Next(){
    if(position<triangles.length){
        ctx.beginPath();
        ctx.moveTo(triangles[position].x1, triangles[position].y1); 
        ctx.lineTo(triangles[position].x2, triangles[position].y2);
        ctx.lineTo(triangles[position].x3, triangles[position].y3);
        ctx.lineWidth = 2;
        ctx.strokeStyle='rgba(0,0,0,'+ alphatime(triangles[position].alpha) +')';
        ctx.stroke();
        position++;
    }
}

function timeCount(){
    for (var i=0; i<triangles.length; i++) {
        if(triangles[i].alpha<100){
            triangles[i].alpha=(triangles[i].alpha + 1);
            console.log(triangles[i].alpha, typeof triangles[i].alpha);
        }
    }
}
var trianglesAppear = setInterval(Next, 800);
var fade = setInterval(timeCount,25);

由于某种原因，它不是慢慢出现，而是突然出现，就像三角形[i].alpha 是 40 时一样。请帮帮我！

Answer 1

我的代码写得不好。我没有完全理解 requestAnimationFrame() 方法的概念，所以我尝试使用不同的方法来实现它，这是其中之一，但最好使用 requestAnimationFrame()。如果其他人有问题，我建议你们观看这个系列的视频： https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL

这是新代码，使用 requestAnimationFrame();

//Canvas 1
var canvas1 = document.getElementById("canvas-1");
var ctx = canvas1.getContext("2d");
var triangles=[];
function Line(x1,y1,x2,y2,alpha){
    this.x1 = x1;
    this.y1 = y1;
    this.x2 = x2;
    this.y2 = y2;
    this.alpha = alpha;
}
var alphaspeed=0.05;
triangles.push(new Line(0,400,50,250,0));
triangles.push(new Line(90,400,50,250,0));
triangles.push(new Line(50,250,0,180,0));
triangles.push(new Line(90,400,150,290,0));
triangles.push(new Line(150,290,250,400,0));
triangles.push(new Line(150,290,50,250,0));
triangles.push(new Line(0,180,80,200,0));
triangles.push(new Line(50,250,80,200,0));
triangles.push(new Line(80,200,65,110,0));
triangles.push(new Line(65,110,0,180,0));
triangles.push(new Line(65,110,0,0,0));
triangles.push(new Line(80,200,150,290,0));
triangles.push(new Line(150,290,220,300,0));
triangles.push(new Line(220,300,250,400,0));
triangles.push(new Line(150,290,200,150,0));
triangles.push(new Line(200,150,80,200,0));
triangles.push(new Line(220,300,350,400,0));
triangles.push(new Line(220,300,275,175,0));
triangles.push(new Line(150,290,275,175,0));
triangles.push(new Line(275,175,200,150,0));
triangles.push(new Line(200,150,135,115,0));
triangles.push(new Line(135,115,80,200,0));
triangles.push(new Line(135,115,65,110,0));
triangles.push(new Line(65,110,250,50,0));
triangles.push(new Line(135,115,250,50,0));
triangles.push(new Line(200,150,250,50,0));
triangles.push(new Line(275,175,305,100,0));
triangles.push(new Line(200,150,305,100,0));
triangles.push(new Line(305,100,250,50,0));
triangles.push(new Line(250,50,335,0,0));
triangles.push(new Line(305,100,335,0,0));
triangles.push(new Line(335,1,415,1,0));
triangles.push(new Line(305,100,415,1,0));
triangles.push(new Line(1,1,1,399,0));
triangles.push(new Line(1,399,350,399,0));
function Next(){
    for(var i=0; i<triangles.length;i++){
        if(i==0){
            if(triangles[i].alpha<1){
                ctx.clearRect(0,0,innerWidth,innerHeight);
                ctx.beginPath();
                ctx.moveTo(triangles[i].x1, triangles[i].y1); 
                ctx.lineTo(triangles[i].x2, triangles[i].y2);
                ctx.lineWidth = 2;
                triangles[0].alpha+=alphaspeed;
                ctx.strokeStyle='rgba(0,0,0,'+ triangles[i].alpha +')';
                ctx.stroke();
            }
        }
        else{
            if(triangles[i-1].alpha>1){
                ctx.clearRect(0,0,innerWidth,innerHeight);
                for(var o=0; o<(i); o++){
                    ctx.beginPath();
                    ctx.moveTo(triangles[o].x1, triangles[o].y1); 
                    ctx.lineTo(triangles[o].x2, triangles[o].y2);
                    ctx.lineWidth = 2;
                    triangles[0].alpha=1.01;
                    ctx.strokeStyle='rgba(0,0,0,'+ triangles[o].alpha +')';
                    ctx.stroke();
                }
                ctx.beginPath();
                ctx.moveTo(triangles[i].x1, triangles[i].y1); 
                ctx.lineTo(triangles[i].x2, triangles[i].y2);
                ctx.lineWidth = 2;
                triangles[i].alpha+=alphaspeed;
                ctx.strokeStyle='rgba(0,0,0,'+ triangles[i].alpha +')';
                ctx.stroke();
            }
        }
    }

    if(triangles[(triangles.length-1)].alpha>1){
        cancelAnimationFrame(Next);
    }
    else{
        requestAnimationFrame(Next);
    }
}
Next();

淡入 canvas 个元素无法正常工作

Fading in canvas elements doesn't work properly

javascript

path

fadein