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 相关文章推荐
js 图片缩放(按比例)控制代码
May 27 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
关于js遍历表格的实例
2013/07/10 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
[02:38]DOTA2英雄基础教程 噬魂鬼
2014/01/03 DOTA
Golang与python线程详解及简单实例
2017/04/27 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
django正续或者倒序查库实例
2020/05/19 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
捷克汽车配件和工具销售网站:TorriaCars
2018/02/26 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
优秀学生评语大全
2014/04/25 职场文书
学校安全管理制度
2015/08/06 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
关于Vue Router的10条高级技巧总结
2021/05/06 Vue.js
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技