@Wolver

Отрисовка графики на Canvas по таймеру — HTML5 Canvas?

Здравствуйте, нашёл интересный js-код визуальных эффектов на html5 canvas, который создаёт фейерверк. У меня слабоватые познания в JS, но довольно хорошие в С++, поэтому в коде не плаваю и понимаю, а логику отрисовки canvas могу сопоставлять с openGL. Я добавил к коду появление надписи и хотел бы ещё переход на другую страницу.
Но всё это хочется плавно по времени, т.е. напр. секунд 5 отрисовка фейерверка, ещё сек 5-7 на прочтение пользователем текста, а после уже переход на другую страницу через document.location.href = "2.html". Я добавил if(jj<500) в код ф-ции draw и получается после 500 отрисовок сцены с фейерверком оно мне потом отрисовывает надпись, а вот как дальше перейти на страницу, чтобы надпись провисела свои сек 5, хз. Как это сделать? Помогите пож. с кодом.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<style>
#canvas {
    /*border: 1px solid red;
    background-color: #ffff00;
    margin: 100px 0px 0px 100px;*/
}
html,body
{
    height: 100%;  
    overflow-x:hidden;
    overflow-y:hidden;
}
body
{
    background: url(image/night.jpg) no-repeat;
    background-size: cover;
}
</style>
<canvas id="canvas"></canvas>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script-->
<script src="js/jquery-3.1.1.min.js"></script>
<script>
    $(function() {
        var canvas = $('#canvas')[0];
        canvas.width = $(window).width();//200
        canvas.height = $(window).height();//200
        var ctx = canvas.getContext('2d');
//==============================================================
        var img = new Image();
        img.src = "image/night.jpg"; //для добавления картинки на фон
        var jj=0;                             //счётчик к-ва обработок draw() для фейерверка, т.е. сколько раз будет отрис. сцена с ним 
        var jjj=0;                            //аналогичные счётчики в попытке организовать логику отрисовки... 
        var my_count=0;                 //   
//==============================================================
// init
        ctx.fillStyle = '#000';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
// objects
        var listFire = [];
        var listFirework = [];
        var fireNumber = 15; //количество салютов за 1 раз
        var center = {
            x: canvas.width / 2,
            y: canvas.height / 2
        };
        var range = 100;    //как далеко разлетятся салюты
        for (var i = 0; i < fireNumber; i++) {
            var fire = {
                x: Math.random() * range / 2 - range / 4 + center.x,
                y: Math.random() * range * 2 + canvas.height,
                size: Math.random() + 0.5,
                fill: '#fd1',
                vx: Math.random() - 0.5,
                vy: -(Math.random() + 4),
                ax: Math.random() * 0.02 - 0.01,
                far: Math.random() * range + (center.y - range)
            };
            fire.base = {
                x: fire.x,
                y: fire.y,
                vx: fire.vx
            };
//
            listFire.push(fire);
        }
 
        function randColor() {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = 'rgb($r, $g, $b)';
            color = color.replace('$r', r);
            color = color.replace('$g', g);
            color = color.replace('$b', b);
            return color;
        }
        (function loop() {
            requestAnimationFrame(loop);
            update();
            draw();
        })();
 
        function update()
        {
            for (var i = 0; i < listFire.length; i++) {
                var fire = listFire[i];
//
                if (fire.y <= fire.far) {
// case add firework
                    var color = randColor();
                    for (var i = 0; i < fireNumber * 5; i++) {
                        var firework = {
                            x: fire.x,
                            y: fire.y,
                            size: Math.random() + 1.5,
                            fill: color,
                            vx: Math.random() * 5 - 2.5,
                            vy: Math.random() * -5 + 1.5,
                            ay: 0.05,
                            alpha: 1,
                            life: Math.round(Math.random() * range / 2) + range / 2
                        };
                        firework.base = {
                            life: firework.life,
                            size: firework.size
                        };
                        listFirework.push(firework);
                    }
// reset
                    fire.y = fire.base.y;
                    fire.x = fire.base.x;
                    fire.vx = fire.base.vx;
                    fire.ax = Math.random() * 0.02 - 0.01;
                }
//
                fire.x += fire.vx;
                fire.y += fire.vy;
                fire.vx += fire.ax;
            }
            for (var i = listFirework.length - 1; i >= 0; i--) {
                var firework = listFirework[i];
                if (firework) {
                    firework.x += firework.vx;
                    firework.y += firework.vy;
                    firework.vy += firework.ay;
                    firework.alpha = firework.life / firework.base.life;
                    firework.size = firework.alpha * firework.base.size;
                    firework.alpha = firework.alpha > 0.6 ? 1 : firework.alpha;
//
                    firework.life--;
                    if (firework.life <= 0) {
                        listFirework.splice(i, 1);
                    }
                }
            }
        }
 
        function draw()
        {
// clear
            if(jj<500)              //до 500 отрисовок сцены - показываем фейерверк, после в ветке else рисуем надпись
            {
                ctx.globalCompositeOperation = 'source-over';
                ctx.globalAlpha = 0.18;
                ctx.fillStyle = '#000';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
//==============================================================
                var pattern = ctx.createPattern(img, "repeat");   //для отрисовки картинки на canvas, как фон
                ctx.fillStyle = pattern;
                //ctx.fillRect(0, 0, 250, 300);
                //ctx.strokeRect(0, 0, 250, 300);
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.strokeRect(0, 0, canvas.width, canvas.height);
//==============================================================
// re-draw
                ctx.globalCompositeOperation = 'screen';
                ctx.globalAlpha = 1;
                for (var i = 0; i < listFire.length; i++) {
                    var fire = listFire[i];
                    ctx.beginPath();
                    ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fillStyle = fire.fill;
                    ctx.fill();
                }
                for (var i = 0; i < listFirework.length; i++) {
                    var firework = listFirework[i];
                    ctx.globalAlpha = firework.alpha;
                    ctx.beginPath();
                    ctx.arc(firework.x, firework.y, firework.size, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.fillStyle = firework.fill;
                    ctx.fill();
                }
                jj++;
            }
            else
            {
                ctx.globalCompositeOperation = 'source-over';
                ctx.globalAlpha = 0.18;
                var pattern = ctx.createPattern(img, "repeat");
                ctx.fillStyle = pattern;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.strokeRect(0, 0, canvas.width, canvas.height);
                //выводим текст
                ctx.fillStyle = "#0f0";
                ctx.font = "italic 14pt Arial";
                ctx.fillText("строчка 1-я", canvas.width/2-100, canvas.height/2-120);
                ctx.fillText("строчка 2-я", canvas.width/2-100, canvas.height/2-100);
                ctx.fillText("строчка 3-я", canvas.width/2-100, canvas.height/2-80);
                ctx.fillText("строчка 3-я", canvas.width/2-100, canvas.height/2-60);
                jjj++;
                if((jjj>20)&&(my_count!=20))
                {
                    ctx.setTimeout(draw(),5000);
                    my_count++;
                }
                else
                {
                    document.location.href = "2.html";
                }
            }
        }
    });
</script>
</body>
</html>
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы