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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
js对象的比较
Feb 26 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
Vue实现导航栏菜单
Aug 19 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无刷新上传文件实现代码
2011/09/19 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php中的PHP_EOL换行符详细解析
2013/10/26 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
javascript类型转换示例
2014/04/29 Javascript
基于javascript实现表格的简单操作
2016/05/21 Javascript
JavaScript实现区块链
2018/03/14 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
python实现simhash算法实例
2014/04/25 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Django自定义分页效果
2017/06/27 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
使用phonegap创建联系人的实现方法
2017/03/30 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
学生自我鉴定范文
2013/10/04 职场文书
管理学专业个人求职信范文
2013/12/13 职场文书
自我评价范文分享
2014/01/04 职场文书
九年级家长会邀请函
2014/01/15 职场文书
就业协议书范本
2014/10/08 职场文书
构建和谐校园倡议书
2015/01/19 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
后勤个人工作总结
2015/02/28 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python