用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的图形3d翻转效果应用示例
Apr 08 HTML / CSS
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 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中读取文件的8种方法和代码实例
2014/08/05 PHP
php实现复制移动文件的方法
2015/07/29 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Swoole扩展的6种模式深入详解
2021/03/04 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
python实现折半查找和归并排序算法
2017/04/14 Python
Python实现找出数组中第2大数字的方法示例
2018/03/26 Python
python 实现倒排索引的方法
2018/12/25 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
KIKO MILANO荷兰网上商店:意大利专业化妆品品牌
2017/05/12 全球购物
sort命令的作用和用法
2012/11/04 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
班级寄语大全
2014/04/10 职场文书
安全生产标语大全
2014/10/06 职场文书
职代会闭幕词
2015/01/28 职场文书
python多线程方法详解
2022/01/18 Python