帶畫布的動畫背景

Question

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

Answer 1

Animated background with canvas

好了，所以由它的聲音，你可能想找到一個頁面，你感興趣（如canvasRenderingContext2d頁）來檢測出MDN，並從那裏開始閱讀（你會學到ALOT真快速）。但是，又回到了這個帖子的點，我會建議（從你那裏列出的問題判斷）是：

• 檢查通過window的光標事件的光標位置。
• 如果繪圖別名由於畫布透明度而成爲問題，則每次繪製時都清除畫布。使用​​來幫助瀏覽器調度畫布重繪。

下面顯示了這種實現的演示示例。在下面的例子中，光標的座標顯示在光標位置，相對於光標位置的黃色圓點背景位於頁面中心。請享用！

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>