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) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- canvas绘制渐变图形(Canvas实现放大镜效果完整案例分析附代码)
- html5canvas画图有什么用(Html5基于canvas实现电子签名并生成PDF文档)
- html使用canvas画矩形(CSS、SVG和canvas分别实现文本文字纹理叠加效果)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- canvas图片显示报错(html2canvas生成的图片偏移不完整的解决方法)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas时钟代码(canvas实现烟花的示例代码)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- 获取canvas画布内容(清除canvas画布内容点擦除+线擦除)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- 泰国安全吗(泰国安全吗2023)
- 菲律宾安全吗(菲律宾安全吗)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 数字藏品市场有多乱 周杰伦丢了 一只猴 ,损失超300万(数字藏品市场有多乱)
- 这里输入关键词(怎么输入关键词搜索)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
热门推荐
- css3轮播案例(纯CSS3实现图片无间断轮播效果)
- docker 查看当前镜像(Docker 查看镜像信息的方法)
- MVC中数据验证
- linux系统查看nginx系统版本(Linux中Nginx的防盗链和优化的实现代码)
- laravel 框架关键技术解析(在laravel框架中实现封装公共方法全局调用)
- 香港云服务器哪个最好(香港云服务器和国内云服务器有什么区别?)
- python获取企业微信信息(通过shell+python实现企业微信预警)
- docker端口映射怎么添加(Docker 动态修改容器端口映射的方法)
- sql server日期查询语句(SQL Server中查询结果超出了查询时间范围解决方法)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9