canvas两种形式动画(用canvas做一个DVD待机动画的实现代码)
类别:Web前端 浏览量:112
时间:2021-10-01 01:03:11 canvas两种形式动画
用canvas做一个DVD待机动画的实现代码免责声明
不是打算教 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画个正方形(canvas小画板之平滑曲线的实现)
- jscanvas画折线图(js+canvas实现代码雨效果)
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- 微信小程序canvas 动画(微信小程序使用canvas绘制钟表)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- html判断canvas已经绘制过了(html2canvas截图空白问题的解决)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- canvas时钟代码(canvas实现烟花的示例代码)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- html5 canvas 性能(基于html5 canvas做批改作业的小插件)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- canvas实现滚动列表(Canvas实现贝赛尔曲线轨迹动画的示例代码)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- 乔欣古装女主戏获热度 作为女主,却没吃到红利(乔欣古装女主戏获热度)
- 爱情是什么(爱情是什么最经典的话)
- 乔欣 古装剧中的高颜值(古装剧中的高颜值)
- 怎么才可以财富自由(如何让自己实现财富自由)
- 为什么越来越多年轻人回农村(为什么越来越多年轻人回农村生活)
- 怎么快速学好英语(怎么快速学好英语初中)
热门推荐
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- mysql实用教程(Mysql调优Explain工具详解及实战演练推荐)
- 媲美serv-u开源ftp(个人FTP建站域名解析serv-u常见问题解决方法之完全解决方案)
- SQLServer将数据导出为SQL脚本
- php运用redis实现抢购实例(PHP+redis实现微博的拉模型案例详解)
- 阿里云服务器远程连不上(阿里云控制台重置密码重启后无法访问服务器的原因及解决方法)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- 使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
- javascript的作用域详解精简版(浅谈JavaScript 中的延迟加载属性模式)
- dedecms文章权重排序(Dedecms实现tags云标签随机颜色与字体大小方法详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9