往前走，一片诱人的新绿尽收眼底，那是满池的新荷。荷叶有的平展着圆盘浮在水面上；有的绿伞般在空中摇曳；有的兜着水珠把阳光反射得灿烂夺目；有的长得非常高，却未展开叶面，勇敢地挺立着。荷花则多半含苞待放，白中透粉的一朵朵花儿，活像一个个花仙子借着微风，在池中裙袂飞扬，翩然起舞。
免责声明
不是打算教 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)
}
}
到此这篇关于用canvas做一个DVD待机动画的如何实现代码就介绍到这了。立下人生志向，活出人生精彩;铺好今天沙石，走出明天大道。更多相关用canvas做一个DVD待机动画的如何实现代码内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
