畫布動畫的背景

Question

如何用html5 canvas實現動畫背景？ 我想為此動畫添加鼠標事件。 我在背景上遇到文字問題，因為在畫布上繪畫時它消失了。 使用z坐標處理無法正常工作。

Answer 1

畫布動畫的背景

好的，聽起來，您可能希望通過查找感興趣的頁面（例如canvasRenderingContext2d頁面）來檢出MDN，然后從那里開始閱讀（您會很快學習很多）。 但是，回到本文的重點，我建議（根據您在此處列出的問題判斷）是：

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