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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
详解JavaScript基于面向对象之继承实例
Dec 16 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
js实现全选和全不选功能
Jul 28 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
2009/04/10 Javascript
JavaScript 对象成员的可见性说明
2009/10/16 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
Python网络爬虫实例讲解
2016/04/28 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
将python安装信息加入注册表的示例
2019/11/20 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
Python 实现向word(docx)中输出
2020/02/13 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
运动会跳远加油稿
2014/02/20 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
党员民主生活会材料
2014/12/15 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Python合并多张图片成PDF
2021/06/09 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js
docker-compose部署Yapi的方法
2022/04/08 Servers