不知道大家有沒有這樣的經(jīng)歷，在等待視頻緩沖和網(wǎng)頁緩沖的時(shí)候會(huì)出現(xiàn)一些漫畫和各種效果,那么今天我們就來說說有關(guān)于：“html5使用canvas怎么實(shí)現(xiàn)待機(jī)動(dòng)畫？待機(jī)動(dòng)畫案例分享！”這個(gè)問題的相關(guān)內(nèi)容分享！
免責(zé)聲明
不是打算教 canvas，只是覺得好玩就簡(jiǎn)單看了一下。
意思就是做得略粗糙，別噴我。。
效果
幀數(shù)略低，實(shí)際當(dāng)然流暢得多。
實(shí)現(xiàn) HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
* {margin: 0;padding: 0;}
body {background-color: lightblue;}
#canvas {background-color: black;width: 100vw;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>/* 見下 */</script>
</body>JS:
window.onload = function () {
let
// 畫布
ctx = document.getElementById('canvas').getContext('2d'),
// 畫布大小
canvas_width = document.getElementById('canvas').width,
canvas_height = document.getElementById('canvas').height,
// DVD 圖標(biāo)的文本顏色、字體、背景色
text_color = ['green', 'blue', 'purple', 'yellow', 'white', 'yellow', 'white'],
text_font = 'italic bold 50px yahei',
background_color = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
// 背景矩形的尺寸
background_width = 110,
background_height = 50,
// 向矩形添加文本時(shí)，高度有點(diǎn)偏差
fix_height = 7,
// 速度，每次重繪移動(dòng) 0.5 px
speed_x = 0.5,
speed_y = 0.5,
// 移動(dòng)方向，初始為 'r-b' 右下
direction = 'r-b',
// 圖標(biāo) x 和 y 坐標(biāo)，初始為 0
position_x = 0,
position_y = 0,
// 碰撞次數(shù)，用來計(jì)算背景和文本顏色
count = 0
dvd()
function dvd() {
// 移動(dòng)方向
switch (direction) {
// 右下
case 'r-b':
position_x += speed_x
position_y += speed_y
break
// 右上
case 'r-t':
position_x += speed_x
position_y -= speed_y
break
// 左下
case 'l-b':
position_x -= speed_x
position_y += speed_y
break
// 左上
case 'l-t':
position_x -= speed_x
position_y -= speed_y
break
}
// 清空畫布
ctx.clearRect(0, 0, canvas_width, canvas_height)
// 重繪
ctx.fillRect(position_x, position_y, background_width, background_height)
// 碰撞檢測(cè)
// 底
if (position_y + background_height >= canvas_height) {
direction = direction.replace('b', 't')
// 碰撞次數(shù)統(tǒng)計(jì)
count += 1
}
// 右
if (position_x + background_width >= canvas_width) {
direction = direction.replace('r', 'l')
count += 1
}
// 左
if (position_x < 0) {
direction = direction.replace('l', 'r')
count += 1
}
// 上
if (position_y < 0) {
direction = direction.replace('t', 'b')
count += 1
}
// 文本
ctx.font = text_font
ctx.fillStyle = text_color[count % 7]
ctx.fillText("DVD", position_x, position_y + background_height - fix_height)
// 背景色
ctx.fillStyle = background_color[count % 7]
// 開始動(dòng)畫
window.requestAnimationFrame(dvd)
}
}相信通過這篇文章對(duì)于：“html5使用canvas怎么實(shí)現(xiàn)待機(jī)動(dòng)畫？待機(jī)動(dòng)畫案例分享！”這個(gè)問題有所了解了吧！以上就是本文的全部?jī)?nèi)容，更多和html5相關(guān)的內(nèi)容我們可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！
