溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)html5怎么實(shí)現(xiàn)鼠標(biāo)追隨動(dòng)畫背景效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
如何制作動(dòng)畫
常用的繪圖動(dòng)畫的方式有以下幾種：
CSS3
SVG
Canvas
WebGL
讓我們先分析分析這些方法的優(yōu)劣性
CSS3 通過css3的關(guān)鍵幀等方式實(shí)現(xiàn)動(dòng)畫效果，看起來好像挺實(shí)用，但這樣增加了一個(gè)沒有意義的DOM節(jié)點(diǎn)，不符合語義化編程規(guī)范
SVG、Canvas 都可以使用腳本語言來實(shí)現(xiàn)動(dòng)畫
SVG 本質(zhì)上是使用XML描述2D圖形的語言（矢量圖），SVG創(chuàng)建的每一個(gè)元素都是一個(gè)獨(dú)立的DOM元素，既然是獨(dú)立的DOM元素，那表示我們可以通過CSS和JS來控制DOM，也可以對每一個(gè)DOM元素進(jìn)行監(jiān)聽，但由于都是DOM元素，所以如果我們修改了SVG中的DOM元素，瀏覽器就會(huì)自動(dòng)進(jìn)行DOM重繪
Canvas通過Javascript來繪制2D圖形（位圖），而Canvas只是一個(gè)HTML元素，其中的圖形不會(huì)單獨(dú)創(chuàng)建DOM元素，所以我們無法通過Js來操作Canvas內(nèi)的圖形，也無法監(jiān)聽具體圖形
WebGL 用于3D展示、動(dòng)畫、游戲，說白了就是基于Canvas的3D框架
Canvas、SVG適用場景
Canvas 適用于位圖，高數(shù)據(jù)量繪制頻率的場景，小游戲，小特效，繪制圖表、活動(dòng)頁面、炫酷背景
SVG 適用于矢量圖，低數(shù)據(jù)量繪制頻率的場景，如圖形圖表
直擊重點(diǎn)，制作鼠標(biāo)跟隨動(dòng)畫
需求分析：鼠標(biāo)移動(dòng)，經(jīng)過的地方創(chuàng)建一個(gè)圓，圓的半徑大小由小變大，達(dá)到某個(gè)固定大小時(shí)該圓消失，圓的顏色隨機(jī)變化
創(chuàng)建全屏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 則是隨機(jī)漸變顏色
radius: 0.9, // 圓每次增加的半徑
o: 0.09, // 判斷圓消失的條件，數(shù)值越大，消失的越快
},
color,
circleColor,
round_arr = []; // 存放圓的數(shù)組監(jiān)聽鼠標(biāo) onmousemove 事件
需求：在鼠標(biāo)移動(dòng)的過程中，不斷在鼠標(biāo)滑過的位置產(chǎn)生一個(gè)逐漸變大的圓
Canvas中創(chuàng)建動(dòng)畫的方式就是不斷的清除屏幕然后重繪
由于移動(dòng)的軌跡是由一個(gè)個(gè)圓構(gòu)成，那我們就應(yīng)該使用數(shù)組存儲(chǔ)圓的信息（xy坐標(biāo)，半徑），然后在鼠標(biāo)移動(dòng)的時(shí)候?qū)⑹髽?biāo)的位置信息存放在數(shù)組中
所以監(jiān)聽onmousemove事件就是為了拿到鼠標(biāo)的信息：
window.onmousemove = function(event) {
X = event.clientX // 當(dāng)前在屏幕的x位置
Y = event.clientY // 當(dāng)前在屏幕的y位置
// 將信息存入圓數(shù)組
round_arr.push({
X:X,
Y:Y,
radius:para.radius
o:1
})
}設(shè)置 color
在onmousemove中，我們已經(jīng)將坐標(biāo)信息和半徑存入round_arr圓數(shù)組中，接下來就設(shè)置顏色了
在para對象里，默認(rèn)的color是false，說明圓的顏色是隨機(jī)的，如果color不為false，則圓的顏色就為color的顏色：
if(para.color){
circleColor = para.color
}else{
color = Math.random() * 360
}
若想要設(shè)置顏色漸變
if (!para.color) {
color += .1;
circleColor = 'hsl(' + color + ',100%,80%)';
}如果要讓顏色變化，則需要將顏色變化的代碼放在一個(gè)會(huì)一直執(zhí)行的函數(shù)
定義 animation() 函數(shù) !important：
function animate() {
if (!para.color) { # 設(shè)置顏色
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) # 使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用
}requestAnimationFrame()會(huì)告訴瀏覽器，你需要執(zhí)行動(dòng)畫，并請求瀏覽器調(diào)用指定的函數(shù)在下一次重繪之前更新動(dòng)畫。requestAnimationFrame()使用一個(gè)回調(diào)函數(shù)作為參數(shù)，這個(gè)回調(diào)函數(shù)會(huì)在瀏覽器重繪之前調(diào)用
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠標(biāo)屏幕互動(dòng)動(dòng)畫</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 則是隨機(jī)漸變顏色
radius: 0.9,
o: 0.09, // 判斷圓消失的條件，數(shù)值越大，消失的越快
},
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
})
}
// 判斷參數(shù)中是否設(shè)置color，設(shè)置則使用該color，否則為隨機(jī)
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() // 結(jié)束路徑
ctx.fill()
round_arr[i].radius += para.radius // 增大圓
round_arr[i].o -= para.o // 消失時(shí)間變快
if (round_arr[i].o <= 0) {
round_arr.splice(i, 1);
i--;
}
}
window.requestAnimationFrame(animate)
}
animate()
</script>
</body>
</html>感謝各位的閱讀！關(guān)于“html5怎么實(shí)現(xiàn)鼠標(biāo)追隨動(dòng)畫背景效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼