用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属性box-sizing使用指南
Dec 09 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5 Web 存储详解
Sep 16 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
html2 canvas svg不能识别的解决方案
Jun 03 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php中explode函数用法分析
2014/11/15 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
js中的闭包学习心得
2018/02/06 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
jQuery中实现text()的方法
2019/04/04 jQuery
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python中的高级函数map/reduce使用实例
2015/04/13 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
大学毕业自我鉴定范文
2014/02/03 职场文书
学生周末长期请假条
2014/02/15 职场文书
绿化工程实施方案
2014/03/17 职场文书
环保口号大全
2014/06/12 职场文书
2015年大学辅导员工作总结
2015/05/12 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
合同审查法律意见书
2015/06/04 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang