Анимированный фон с холстом

Question

Как реализовать анимированный фон с помощью html5 canvas? Я хочу добавить события мыши для этой анимации. У меня проблемы с текстом поверх фона, потому что он исчезает при рисовании на холсте. Обработка с координатой z не работает правильно.

Answer 1

Анимированный фон с холстом

Хорошо, звучит так, что вы можете проверить MDN, найдя интересующую вас страницу (например, страницу canvasRenderingContext2d ), и начать читать оттуда (вы действительно узнаете ALOT). быстро). Но, возвращаясь к сути этого поста, я бы порекомендовал (судя по перечисленным там вопросам):

• Проверьте положение курсора с помощью событий курсора window.
• Очистите холст каждый раз, когда рисуете, если псевдонимы рисования являются проблемой из-за прозрачности холста.
• Используйте requestAnimationFrame, чтобы помочь браузеру в планировании перерисовки холста.

Демонстрационный пример такой реализации показан ниже. В приведенном ниже примере координаты курсора отображаются в месте расположения курсоров с желтым точечным фоном относительно положения курсоров в центре страницы. Наслаждайтесь!

var bgcanvas = document.getElementById('backgroundCanvas'),
    bgcontext = bgcanvas.getContext('2d'),
    mouseX = 0,
    mouseY = 0,
    mouseChanged = false;

window.addEventListener('mousemove', function(evt){
  if (mouseX !== evt.clientX)
    mouseX = evt.clientX, mouseChanged = true;
  if (mouseY !== evt.clientY)
    mouseY = evt.clientY, mouseChanged = true;
});

var repaintBGcanvasCUR = 0;
var repaintBGcanvas = function(){
  requestAnimationFrame(repaintBGcanvas);
  if ((++repaintBGcanvasCUR%2) // only modify the canvas half the time to reduce the CPU strain
      && mouseChanged){ // if the mouse has changed
    mouseChanged = false;
    bgcontext.clearRect(
      0,0,bgcanvas.width,bgcanvas.height);
    bgcontext.beginPath();
    // create the yellow circle path:
    bgcontext.arc(mouseX, mouseY, 
      // pythagorean theorem:
      Math.hypot(mouseX-bgcanvas.width/2, mouseY-bgcanvas.height/2)/4,
      0, 2 * Math.PI);
    bgcontext.closePath();
    bgcontext.fillStyle = "rgba(255,255,0,.5)";
    // fill in the yellow circle
    bgcontext.fill();
    bgcontext.textAlign = 'center'; // horozontally center the text
    bgcontext.textBaseline = 'middle'; // vertically center the text
    bgcontext.font = '48px monospace'; // make the text fancy
    bgcontext.fillStyle = 'red'; // make the text fancy
    bgcontext.fillText( mouseX + ' X ' + mouseY, mouseX, mouseY);
  }
}
window.addEventListener(
  'load', repaintBGcanvas );

var resizeBackgroundCanvas = function(){
  bgcanvas.width = window.innerWidth;
  bgcanvas.height = window.innerHeight;
}
window.addEventListener(
  'resize', resizeBackgroundCanvas );
window.addEventListener(
  'load', resizeBackgroundCanvas );

// speed up canvas:
bgcontext.imageSmoothingEnabled = false;

html, body, #backgroundCanvas {
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: none;
}
#backgroundCanvas {
  z-index: -2147483647; /*maximum far back*/
  position: fixed;
  top: 0; left: 0;
}
p {
  margin: 3em 2em;
}

<canvas id="backgroundCanvas"></canvas>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu felis eros. Donec tellus risus, dapibus luctus velit nec, molestie pulvinar tellus. Nulla cursus placerat risus in fermentum. Vestibulum rutrum rhoncus leo in sagittis. Morbi blandit, nibh et ornare faucibus, lectus massa vestibulum nulla, et pellentesque augue nunc ut tellus. Cras interdum, diam nec tincidunt rhoncus, dolor tortor lobortis ante, quis pretium lectus enim at lectus. Suspendisse consectetur, neque sed vulputate cursus, ex erat tempor magna, eu efficitur purus odio id libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque suscipit justo ut tristique. Ut finibus congue nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat eget nulla rhoncus semper. Proin placerat efficitur tortor, id porta est maximus ut. Phasellus tincidunt nisi sagittis consectetur laoreet. Cras eget consectetur mauris. Maecenas ornare, neque ac finibus sagittis, quam orci finibus nunc, vel cursus enim orci a arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu felis eros. Donec tellus risus, dapibus luctus velit nec, molestie pulvinar tellus. Nulla cursus placerat risus in fermentum. Vestibulum rutrum rhoncus leo in sagittis. Morbi blandit, nibh et ornare faucibus, lectus massa vestibulum nulla, et pellentesque augue nunc ut tellus. Cras interdum, diam nec tincidunt rhoncus, dolor tortor lobortis ante, quis pretium lectus enim at lectus. Suspendisse consectetur, neque sed vulputate cursus, ex erat tempor magna, eu efficitur purus odio id libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque suscipit justo ut tristique. Ut finibus congue nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat eget nulla rhoncus semper. Proin placerat efficitur tortor, id porta est maximus ut. Phasellus tincidunt nisi sagittis consectetur laoreet. Cras eget consectetur mauris. Maecenas ornare, neque ac finibus sagittis, quam orci finibus nunc, vel cursus enim orci a arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu felis eros. Donec tellus risus, dapibus luctus velit nec, molestie pulvinar tellus. Nulla cursus placerat risus in fermentum. Vestibulum rutrum rhoncus leo in sagittis. Morbi blandit, nibh et ornare faucibus, lectus massa vestibulum nulla, et pellentesque augue nunc ut tellus. Cras interdum, diam nec tincidunt rhoncus, dolor tortor lobortis ante, quis pretium lectus enim at lectus. Suspendisse consectetur, neque sed vulputate cursus, ex erat tempor magna, eu efficitur purus odio id libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque suscipit justo ut tristique. Ut finibus congue nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin feugiat eget nulla rhoncus semper. Proin placerat efficitur tortor, id porta est maximus ut. Phasellus tincidunt nisi sagittis consectetur laoreet. Cras eget consectetur mauris. Maecenas ornare, neque ac finibus sagittis, quam orci finibus nunc, vel cursus enim orci a arcu.</p>