免责声明
不是打算教 canvas，只是觉得好玩就简单看了一下。
意思就是做得略粗糙，别喷我。。
效果
帧数略低，实际当然流畅得多。
实现 html
<!doctype html><head> <meta name="viewport" content="width=device-width, ur-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.分隔号0"> <style> * {margin: 0;padding: 0;} body {background-c油条哥olor格林童话经典故事: lightblue;} #canvas {background-color: black;width: 100vw;} </s一起去郊游tyle></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) { // 右下 ca 'r-b': position_x += speed_x position_y += speed_y break // 右上 ca 'r-t': position_x += speed_x position_y -= speed_y break // 左下 ca 'l-b': position_x -= speed_x position_y += speed_y break // 左上 ca '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) }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文发布于:2023-04-03 03:33:18，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/6d635fd5238b60413c081f674b043dce.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：用canvas做一个DVD待机动画的实现代码.doc
本文 PDF 下载地址：用canvas做一个DVD待机动画的实现代码.pdf
| 留言与评论（共有 0 条评论） |
