Скоро Новый год, используйте JS, чтобы ваша веб-страница зажгла 🎆 фейерверк

внешний интерфейс JavaScript
Скоро Новый год, используйте JS, чтобы ваша веб-страница зажгла 🎆 фейерверк

Скоро Праздник Весны, а загрязнение воздуха, такое как фейерверки, все еще не разрешено в больших городах. Я скучаю по тому счастливому времени, когда я сажала цветы во дворе, когда я был ребенком. Дети в больших городах не могут испытать такое счастье. . Но нам, фронтенд-инженерам, это не сложно, давайте научим вас, как использовать JS, чтобы запускать фейерверки на веб-страницах.

существуетcodepenПоиск в нем «фейерверков» может найти все виды эффектов фейерверков, сделанных с помощью JS. Код, которым я поделился сегодня, также упоминается в одном из них.

После того, как я изменил этот код, он был имплантирован в пруд с головастиками «Я люблю наггетсы». Просто отправьте «С Новым годом» и «С праздником весны», и вы сможете запускать фейерверки в пруду.

Прочитав эту статью, вы гарантировано сможете написать эффект запуска фейерверка на любой платформе и на любом языке.

Как?

Сначала создайте холст

Сначала создайте новый с тем же размером, что и видимая область веб-страницы.canvas, и наблюдая за областью отображенияresizeсобытие для измененияcanvasразмер.

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function clearCanvas(){
	context.fillStyle = '#ffffff';
	context.fillRect(0,0,canvas.width, canvas.height);
}

window.addEventListener('resize', resizeCanvas, false);
resizeCanvas();

Потренируйтесь перед запуском фейерверков

Все фейерверки взрываются из точки и распространяются по разным дугам, поэтому сначала мы рисуем несколько маленьких точек вокруг центра. Немного какloadingмаленькие круги. На самом деле это первое состояние фейерверка...

function mouseDownHandler(e) {
    var x = e.clientX;
    var y = e.clientY;

    drawFireworks(x,y);
}

function drawFireworks(sx,sy) {
    var count = 10;//烟花粒子数量
    var radius = 10;//烟花环绕半径

    for(var i = 0 ;i<count;i++){
        var angle = 360/count*i;//烟花粒子角度
        var radians = angle * Math.PI / 180;//烟花粒子弧度

        var vx = sx+Math.cos(radians) * radius;
        var vy = sy+Math.sin(radians) * radius;

        var size = 2;
        context.beginPath();
        context.arc(vx, vy, size, 0, Math.PI*2, false)
        context.closePath();
        context.fillStyle = "#ff0000";
        context.fill();
    }
}

document.addEventListener('mousedown', mouseDownHandler, false);

Каждый должен понимать значение приведенного выше кода, верно? Но теперь нет ни анимации, ни фейерверков. Не волнуйтесь, мы сразу же заставим их двигаться.

пошевеливайся

Двигаться - это непрерывно рисовать центр круга, радиус которого увеличивается от малого к большему... Вы понимаете, есть два способа непрерывного рисования.setIntervalиrequestAnimationFrame, так или иначе.

  1. setInterval

Достоинства: Легче установить частоту прорисовки анимации.

var radius = 0;//圆心半径
function fire(x,y){
    function tick() {
        drawFireworks(x,y);//绘制烟花
        radius++;//半径不断变大
    }
    setInterval(tick,30);//每30毫秒绘制一次
}
  1. requestAnimationFrame

Преимущества: Частота отрисовки синхронизирована с отрисовкой экрана браузера.

var radius = 0;
function fire(x,y){
    function tick() {
        drawFireworks(x,y);
        radius++;
        requestAnimationFrame(tick);
    }
    tick();
}

Ты уже что-то чувствуешь?

больше похоже на фейерверк

Но настоящий фейерверк точно не такой послушный, регулярно держит дугу и скорость, поэтому приходится добавлять какие-то случайные факторы.

var rid;
function fire(x,y){
    createFireworks(x,y);

    function tick() {
        drawFireworks();
        rid=requestAnimationFrame(tick);
    }
    cancelAnimationFrame(rid);
    tick();
}

var particles=[];
function createFireworks(sx,sy){
    particles=[];

    var hue = Math.floor(Math.random()*51)+150;
    var hueVariance = 30;
    var count = 100;

    for(var i = 0 ;i<count;i++){
        var p = {};

        var angle = Math.floor(Math.random()*360);
        p.radians = angle * Math.PI / 180;
        p.radius = 0;

        p.sx = sx;
        p.sy = sy;

        p.speed = (Math.random()*5)+.4;

        p.size = Math.floor(Math.random()*3)+1;

        p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);
        p.brightness = Math.floor(Math.random()*31)+50;
        p.alpha = (Math.floor(Math.random()*61)+40)/100;

        particles.push(p);
    }
}

function drawFireworks() {
    clearCanvas();

    for(var i = 0 ;i<particles.length;i++){
        var p = particles[i];

        p.vx = p.sx+Math.cos(p.radians) * p.radius;
        p.vy = p.sy+Math.sin(p.radians) * p.radius;

        p.radius += 1+p.speed;

        context.beginPath();
        context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false);
        context.closePath();

        context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')';
        context.fill();
    }
}

Довольно шикарно, правда? Теперь давайте добавим к нему небольшой эффект дыма~

function tick() {
	//tips:注意新加入的这4行代码
	context.globalCompositeOperation = 'destination-out';
	context.fillStyle = 'rgba(0,0,0,'+10/100+')';
	context.fillRect(0,0,canvas.width,canvas.height);
	context.globalCompositeOperation = 'lighter';
	//tipsend
	drawFireworks();
	rid=requestAnimationFrame(tick);
}

Для того, чтобы быть более реалистичными, мы продолжаем обновлять

Теперь добавьте немного гравитационных эффектов, чтобы частицы фейерверка двигались все медленнее, а также медленно падали и исчезали.

var vx = Math.cos(p.radians) * p.radius;
var vy = Math.sin(p.radians) * p.radius + 0.4;

p.x += vx;
p.y += vy;

p.radius *= 1 - p.speed/100;

p.alpha -= 0.005;

Теперь этот фейерверк похож на фейерверк?Конечно, вы также можете добавить более подробные переменные для различных параметров. Например, нарисовать петарду и запустить ее в небо из петарды. Наконец, фейерверк... Давайте оставим это каждому, чтобы он понял это сам.

Запустите фейерверк на любой веб-странице

Создайте новую закладку в Chrome, скопируйте следующий код, вставьте его в столбец URL и сохраните.

javascript:!(function() {var cdom = document.createElement("canvas");cdom.id = "myCanvas";cdom.style.position="fixed";cdom.style.left = "0";cdom.style.top = "0";cdom.style.zIndex=-1;document.body.appendChild(cdom);var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d');function resizeCanvas() {canvas.width = window.innerWidth;canvas.height = window.innerHeight;}window.addEventListener('resize', resizeCanvas, false);resizeCanvas();clearCanvas();function clearCanvas(){context.fillStyle = '#000000';context.fillRect(0,0,canvas.width, canvas.height);}function mouseDownHandler(e) {var x = e.clientX;var y = e.clientY;fire(x,y);}var rid;function fire(x,y){createFireworks(x,y);function tick() {context.globalCompositeOperation = 'destination-out';    context.fillStyle = 'rgba(0,0,0,'+10/100+')';    context.fillRect(0,0,canvas.width,canvas.height);    context.globalCompositeOperation = 'lighter';drawFireworks();rid=requestAnimationFrame(tick);}cancelAnimationFrame(rid);tick();}var particles=[];function createFireworks(sx,sy){particles=[];var hue = Math.floor(Math.random()*51)+150;var hueVariance = 30;var count = 100;for(var i = 0 ;i<count;i++){var p = {};var angle = Math.floor(Math.random()*360);p.radians = angle * Math.PI / 180;p.x = sx;p.y = sy;p.speed = (Math.random()*5)+.4;p.radius = p.speed;p.size = Math.floor(Math.random()*3)+1;p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);p.brightness = Math.floor(Math.random()*31)+50;p.alpha = (Math.floor(Math.random()*61)+40)/100;particles.push(p);}}function drawFireworks() {clearCanvas();for(var i = 0 ;i<particles.length;i++){var p = particles[i];var vx = Math.cos(p.radians) * p.radius;var vy = Math.sin(p.radians) * p.radius + 0.4;p.x += vx;p.y += vy;p.radius *= 1 - p.speed/100;p.alpha -= 0.005;context.beginPath();context.arc(p.x, p.y, p.size, 0, Math.PI*2, false);context.closePath();context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+p.alpha+')';context.fill();}}document.addEventListener('mousedown', mouseDownHandler, false);})();

Загрузка исходного кода

Поиск в WeChat“ezfullstack"Подпишись и ответь"fireworks», чтобы получить ссылку на источник

Следуйте за Дашуаем

Старый программист, играющий с различными фронтенд-технологиями.

Последние статьи (Спасибо за вашу поддержку и поддержку 🌹🌹🌹)

Категории