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 相关文章推荐
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
May 11 Javascript
layui表格实现代码
May 20 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
JavaScript文件的同步和异步加载的实现代码
Aug 19 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
使用electron制作满屏心特效的示例代码
Nov 27 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实现图片缩放功能类
2013/12/18 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
js获取变量
2006/08/24 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
详解vue.js的devtools安装
2017/05/26 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
JavaScript的一些小技巧分享
2021/01/06 Javascript
python操作xml文件详细介绍
2014/06/09 Python
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
详解python读取image
2019/04/03 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
2014年会计工作总结
2014/11/27 职场文书
可怜妈妈观后感
2015/06/09 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
MySQL 执行数据库更新update操作的时候数据库卡死了
2022/05/02 MySQL