Здравствуйте, нашёл интересный 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>
