用canvas做一个DVD待机动画的实现代码


Posted in HTML / CSS onApril 12, 2019

免责声明

不是打算教 canvas,只是觉得好玩就简单看了一下。

意思就是做得略粗糙,别喷我。。

用canvas做一个DVD待机动画的实现代码

效果

帧数略低,实际当然流畅得多。

用canvas做一个DVD待机动画的实现代码 

实现 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)
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
可以随进度显示不同颜色的css3进度条分享
Apr 11 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 #HTML / CSS
html5唤醒APP小记
Mar 27 #HTML / CSS
html5录音功能实战示例
Mar 25 #HTML / CSS
浅析HTML5中的download属性使用
Mar 13 #HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 #HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 #HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 #HTML / CSS
You might like
php sybase_fetch_array使用方法
2014/04/15 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
超市客服工作职责
2014/06/11 职场文书
新郎答谢词
2015/01/04 职场文书
人事主管岗位职责
2015/02/04 职场文书
公司酒会主持词
2015/07/02 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python