關于Canvas制作炫酷背景，我會在git上不定時去更新，并會附上詳細的解析，如果有喜歡的話，可以到git上瞧瞧
gitHub傳送門
前言
相信很多前端小白都看過這樣的背景動畫，也好奇如何去實現這種效果！將這種效果應用到自己的個人網站上，會讓整個網站變得與眾不同！
下面我會直擊重點，用最短的時間，使用 Canvas 制作 鼠標跟隨動畫
如何制作動畫
常用的繪圖動畫的方式有以下幾種：
讓我們先分析分析這些方法的優劣性
Canvas、SVG適用場景
直擊重點，制作鼠標跟隨動畫
最終效果
需求分析：鼠標移動，經過的地方創建一個圓，圓的半徑大小由小變大，達到某個固定大小時該圓消失，圓的顏色隨機變化
創建全屏Canvas元素
var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), WIDTH = canvas.width = document.documentElement.clientWidth, HEIGHT = canvas.height = document.documentElement.clientHeight, para = { num: 100, color: false, // 顏色 如果是false 則是隨機漸變顏色 radius: 0.9, // 圓每次增加的半徑 o: 0.09, // 判斷圓消失的條件，數值越大，消失的越快 }, color, circleColor, round_arr = []; // 存放圓的數組 監聽鼠標 onmousemove 事件
需求：在鼠標移動的過程中，不斷在鼠標滑過的位置產生一個逐漸變大的圓
Canvas中創建動畫的方式就是不斷的清除屏幕然后重繪
由于移動的軌跡是由一個個圓構成，那我們就應該使用數組存儲圓的信息（xy坐標，半徑），然后在鼠標移動的時候將鼠標的位置信息存放在數組中
所以監聽onmousemove事件就是為了拿到鼠標的信息
window.onmousemove = function(event) { X = event.clientX // 當前在屏幕的x位置 Y = event.clientY // 當前在屏幕的y位置 // 將信息存入圓數組 round_arr.push({ X:X, Y:Y, radius:para.radius o:1 })}設置 color
在onmousemove中，我們已經將坐標信息和半徑存入round_arr圓數組中，接下來就設置顏色了
在para對象里，默認的color是false，說明圓的顏色是隨機的，如果color不為false，則圓的顏色就為color的顏色
if(para.color){ circleColor = para.color}else{ color = Math.random() * 360}若想要設置顏色漸變if (!para.color) { color += .1; circleColor = 'hsl(' + color + ',100%,80%)';}如果要讓顏色變化，則需要將顏色變化的代碼放在一個會一直執行的函數
定義 animation() 函數 !important
function animate() { if (!para.color) { # 設置顏色 color += .1 color2 = 'hsl(' + color + ',100%,80%)' } ctx.clearRect(0, 0, WIDTH, HEIGHT) # 清除屏幕 for (var i = 0; i < round_arr.length; i++) { ctx.fillStyle = circleColor ctx.beginPath() ctx.arc( round_arr[i].X ,round_arr[i].Y,round_arr[i].radius,0, Math.PI * 2) # 畫圓 ctx.closePath() ctx.fill() round_arr[i].radius += para.radius # 增大半徑 round_arr[i].o -= para.o # 消失快慢 if( round_arr[i].o <= 0){ # 移除圓 round_arr.splice(i,1) i-- } } window.requestAnimationFrame(animate) # 使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用}requestAnimationFrame()會告訴瀏覽器，你需要執行動畫，并請求瀏覽器調用指定的函數在下一次重繪之前更新動畫。requestAnimationFrame()使用一個回調函數作為參數，這個回調函數會在瀏覽器重繪之前調用
完整代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠標屏幕互動動畫</title> <style> * { padding: 0; margin: 0; } #canvas { background: #000; } </style></head><body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), WIDTH = canvas.width = document.documentElement.clientWidth, HEIGHT = canvas.height = document.documentElement.clientHeight, para = { num: 100, color: false, // 顏色 如果是false 則是隨機漸變顏色 radius: 0.9, o: 0.09, // 判斷圓消失的條件，數值越大，消失的越快 }, color, circleColor, round_arr = []; window.onmousemove = function(event) { X = event.clientX Y = event.clientY round_arr.push({ X: X, Y: Y, radius: para.radius, o: 1 }) } // 判斷參數中是否設置color，設置則使用該color，否則為隨機 if (para.color) { circleColor = para.color } else { color = Math.random() * 360 } function animate() { if (!para.color) { color += .1 circleColor = 'hsl(' + color + ',100%,80%)' } ctx.clearRect(0, 0, WIDTH, HEIGHT) // 清除屏幕 for (var i = 0; i < round_arr.length; i++) { ctx.fillStyle = circleColor ctx.beginPath() // 開始路徑 ctx.arc(round_arr[i].X, round_arr[i].Y, round_arr[i].radius, 0, Math.PI * 2) // 畫圓 ctx.closePath() // 結束路徑 ctx.fill() round_arr[i].radius += para.radius // 增大圓 round_arr[i].o -= para.o // 消失時間變快 if (round_arr[i].o <= 0) { round_arr.splice(i, 1); i--; } } window.requestAnimationFrame(animate) } animate() </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
