溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html5如何使用canvas實現待機動畫的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
免責聲明
不是打算教 canvas，只是覺得好玩就簡單看了一下。
意思就是做得略粗糙，別噴我。。
效果
幀數略低，實際當然流暢得多。
實現 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 圖標的文本顏色、字體、背景色
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,
// 向矩形添加文本時，高度有點偏差
fix_height = 7,
// 速度，每次重繪移動 0.5 px
speed_x = 0.5,
speed_y = 0.5,
// 移動方向，初始為 'r-b' 右下
direction = 'r-b',
// 圖標 x 和 y 坐標，初始為 0
position_x = 0,
position_y = 0,
// 碰撞次數，用來計算背景和文本顏色
count = 0
dvd()
function dvd() {
// 移動方向
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)
// 碰撞檢測
// 底
if (position_y + background_height >= canvas_height) {
direction = direction.replace('b', 't')
// 碰撞次數統計
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]
// 開始動畫
window.requestAnimationFrame(dvd)
}
}感謝各位的閱讀！關于“html5如何使用canvas實現待機動畫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
