Выцветание в элементах canvas не работает должным образом - PullRequest
Новая
       9

Выцветание в элементах canvas не работает должным образом

0 голосов
/ 24 февраля 2019

Я пытаюсь решить эту проблему и не могу понять.По сути, я хочу создать группу треугольников, которые постепенно исчезают один за другим (сейчас у меня есть только один треугольник, потому что я все еще тестирую его, поэтому нет смысла добавлять группу треугольников / линий).Чтобы добиться этого, я использую метод 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. Пожалуйста, помогите мне!

1 Ответ

0 голосов
/ 28 февраля 2019

Мой код был плохо написан.Я не совсем понял концепцию метода 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();
...