Star-sky при помощи canvas, помощь в оптимизации

198

10 августа 2018, 10:50

Задался идеей написать звездное(анимированое) небо на canvas, по идее все получилось...но когда добавил как фон, сайт начал работать с тормозами, скорей всего я где-то накосячил с кодом отрисовки и анимации.

Проверял на OC - windows 7(64) в Firefox 61.0 - подвисает, Chrome 67.0.3396.99 - тоже подвисает, но не так заметно.

Прошу помощи у понимающих. Подскажите, что переписать/дописать, где накосячил, или ваш ответ. Спасибо.

Ссылка на сайт(LP) к которому прилепил эту анимацию >Сайт здесь<. И на всякий случай, ссылка отдельно на анимацию >Codepen<

var c = document.getElementById('star-sky'); 
var ctx = c.getContext('2d'); 
var x = c.width = window.innerWidth; 
var y = c.height = window.innerHeight; 
var nStar = Math.round((x + y) / 5); 
var randomSize = Math.floor((Math.random() * 2) + 1); 
 
var stars = []; 
 
function createStars() { 
  'use strict'; 
  stars = []; 
  for (var i = 0; i <= nStar; i++) { 
    stars.push({ 
      x: Math.random() * x, 
      y: Math.random() * y, 
      o: Math.random(), 
      r: Math.random(), 
      s: 0.02, 
    }) 
    if (randomSize > .1) { 
      ctx.shadowBlur = Math.floor((Math.random() * 15)); 
      ctx.shadowColor = "white"; 
    } 
  } 
} 
 
function drawing() { 
  'use strict'; 
  requestAnimationFrame(drawing); 
  ctx.clearRect(0, 0, innerWidth, innerHeight); 
  for (var i = 0; i <= nStar; i++) { 
    var e = stars[i]; 
    if (e.o > 1 || e.o < 0) { 
      e.s = -e.s; 
    } 
    e.o += e.s; 
    ctx.beginPath(); 
    ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2, false); 
    ctx.strokeStyle = 'rgba(255, 255, 255, ' + e.o + ')'; 
    ctx.stroke(); 
  } 
} 
window.onload = function() { 
  createStars(); 
  drawing(); 
};

* { 
  margin: 0; 
  padding: 0; 
} 
 
#star-sky { 
  background: linear-gradient(#00111e 30%, #033d5e); 
  vertical-align: bottom; 
  height: 100vh; 
  width: 100%; 
}

<canvas id="star-sky"></canvas>

Answer 1

Похоже на плохую оптимизацию работы с canvas в FF.

Если Chrome выдает 60fps, то мозила 14fps.

Скорость зависит напрямую от количества "звезд". При 50 штук уже не тормозит)

var c = document.getElementById('star-sky'); 
var ctx = c.getContext('2d'); 
var x = c.width = window.innerWidth; 
var y = c.height = window.innerHeight; 
var nStar = Math.round((x + y) / 5); 
var randomSize = Math.floor((Math.random() * 2) + 1); 
 
var stars = []; 
 
var fps = 0; 
setInterval(function() { 
  console.log(fps); 
  fps = 0; 
}, 1000); 
 
function createStars() { 
  'use strict'; 
  stars = []; 
  for (var i = 0; i <= nStar; i++) { 
    stars.push({ 
      x: Math.random() * x, 
      y: Math.random() * y, 
      o: Math.random(), 
      r: Math.random(), 
      s: 0.02, 
    }) 
    if (randomSize > .1) { 
      ctx.shadowBlur = Math.floor((Math.random() * 15)); 
      ctx.shadowColor = "white"; 
    } 
  } 
} 
 
function drawing() { 
  'use strict'; 
  ctx.clearRect(0, 0, innerWidth, innerHeight); 
  fps++; 
  for (var i = 0; i <= nStar; i++) { 
    var e = stars[i]; 
    if (e.o > 1 || e.o < 0) { 
      e.s = -e.s; 
    } 
    e.o += e.s; 
    ctx.beginPath(); 
    ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2, false); 
    ctx.strokeStyle = 'rgba(255, 255, 255, ' + e.o + ')'; 
    ctx.stroke(); 
  } 
  requestAnimationFrame(drawing); 
} 
window.onload = function() { 
  createStars(); 
  drawing(); 
};

* { 
  margin: 0; 
  padding: 0; 
} 
 
#star-sky { 
  background: linear-gradient(#00111e 30%, #033d5e); 
  vertical-align: bottom; 
  height: 100vh; 
  width: 100%; 
}