用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 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
canvas使用注意点总结
Jul 19 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
amazeui时间组件的实现示例
Aug 18 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
python友情链接检查方法
2015/07/08 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
django model通过字典更新数据实例
2020/04/01 Python
Django获取model中的字段名和字段的verbose_name方式
2020/05/19 Python
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
幼师求职自荐信范文
2014/01/26 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
街道社区活动报告
2015/02/05 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL