Question

如何使用html5 canvas实现动画背景？我想为这个动画添加鼠标事件。我在背景上有文本问题，因为它在画布上绘画时消失了。使用z坐标进行处理无法正常工作。

Answer 1

好的，通过它的声音，您可能想通过找到您感兴趣的页面（如canvasRenderingContext2d页面）来查看MDN，并从那里开始阅读（您将真正学习ALOT）快速）。但是，回到这篇文章的重点，我建议（根据你在那里列出的问题判断）：

通过window光标事件检查光标位置。
每次绘制时清除画布，如果由于画布透明度而导致绘图别名成为问题。
使用requestAnimationFrame帮助浏览器安排画布重绘。

此类实现的演示示例如下所示。在下面的示例中，光标的坐标显示在光标位置，相对于光标位置的黄点背景位于页面中心。享受！

＆＃13;

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;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

用帆布的动画的背景

1 个答案: