动画背景与画布

Animated background with canvas

本文关键字：背景 动画      更新时间：2023-09-26

如何实现html5画布动画背景?我想为这个动画添加鼠标事件。我有文字背景的问题，因为它消失在画布上绘画。

动画背景与画布

好的，所以听起来，你可能想通过找到一个你感兴趣的页面来检查MDN(像canvasRenderingContext2d页面)，并从那里开始阅读(你会很快学到很多)。但是，回到这篇文章的要点，我建议(从你列出的问题判断)是:

  • 通过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>

相关文章：