JavaScript+html5 canvas制作的百花齐放效果完整实例


Posted in Javascript onJanuary 26, 2016

本文实例讲述了JavaScript+html5 canvas制作的百花齐放效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

JavaScript+html5 canvas制作的百花齐放效果完整实例

具体代码如下:

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; padding:0; 
   }
   #canvas {
    border:5px solid gray; box-shadow:0 0 15px 15px #494949 inset;
    margin-top:50px; margin-left:200px;
   }
  </style>
 </head>
 <body >
  <canvas id="canvas" width="1000px" height="500px"></canvas>
  <script type="text/javascript">
   var dyl = {};
   dyl.canvas = document.getElementById("canvas");
   dyl.ctx = dyl.canvas.getContext("2d");
   dyl.runTime = 0;
   dyl.colorList = "01234567890ABCDEFabcdef".split("");
   dyl.colorListLength = dyl.colorList.length;
   dyl.arcList = null;
   /**
   * 得到16进制随机颜色值
   */
   dyl.getColor = function() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += dyl.colorList[Math.floor(Math.random()*dyl.colorListLength)];
    }
    return color;
   };
   /**
   * 一个随机角度,随机初始速度的斜抛对象
   */
   var Arc = function(i) {
    // 设置自有属性
    this.v = Math.round(Math.random()*100)+50;
    this.angle = Math.round(Math.random()*145) + 45;
    this.startTime = +new Date();
    this._angle = this.angle/180*Math.PI;
    this.v_x = this.v*Math.cos(this._angle);
    this.v_y_start = this.v*Math.sin(this._angle);
    this.color = dyl.getColor();
    this.x = 500;
    this.g = 250;
    this.y = 490;
    this.index = i;
    var _self = this;
    this.run = function() {
     var endTime = +new Date();
     var timeSpan = (endTime - _self.startTime)/1000;
     var v_y_now = _self.v_y_start - 1/2*_self.g*Math.pow(timeSpan, 2);
     _self.x = _self.x +_self.v_x * timeSpan;
     _self.y = _self.y - (_self.v_y_start * timeSpan - 1/2*_self.g*Math.pow(timeSpan, 2));
     return this;
    };
    return this;
   };
   /**
   * 全局绘制图像
   */
   dyl.draw = function() {
    var arcList = dyl.arcList;
    var ctx = dyl.ctx;
    dyl.runTime++;
    for(var i=0, length=arcList.length; i<length; i++) {
     var arc = arcList[i];
     if(!arc) {
      continue;
     }
     arc.run();
     ctx.save();
     ctx.beginPath();
     ctx.fillStyle = arc.color;
     ctx.arc(arc.x, arc.y, 2, 0, Math.PI*2);
     ctx.fill();
     ctx.closePath();
     ctx.restore();
    }
    console.log(dyl.runTime);
    if(dyl.runTime >= 25) {
     setTimeout(dyl.init, 1050);
    } else {
     setTimeout(dyl.draw, 20);
    }
   };
   /**
   * 初始化整个事件
   */
   dyl.init = function() {
    dyl.ctx.clearRect(0, 0, 1000, 500);
    dyl.arcList = [];
    dyl.runTime = 0;
    for(var i=0; i<100; i++) {
     dyl.arcList.push(new Arc(i));
    }
    dyl.draw();
   };
   dyl.init();
  </script>
 </body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 #Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 #Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 #Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 #Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 #Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 #Javascript
You might like
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python测试人员需要掌握的知识
2018/02/08 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python实现代码统计工具
2019/09/19 Python
Python实现快速排序的方法详解
2019/10/25 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
校本教研工作制度
2014/01/22 职场文书
幼儿园课题方案
2014/06/09 职场文书
英文导游词
2015/02/13 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
九年级数学教学反思
2016/02/17 职场文书