jQuery+canvas实现的球体平抛及颜色动态变换效果


Posted in Javascript onJanuary 28, 2016

本文实例讲述了jQuery+canvas实现的球体平抛及颜色动态变换效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+canvas实现的球体平抛及颜色动态变换效果

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>canvas平抛</title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    var canvasHeight = 300;
    var canvasWidth = 300;
    var g = 9.8;
    //x, y, vo, r
    function HorizenCast(context, settings) {
      var _self = this;
      $.extend(_self, settings);
      _self.xo = _self.x;
      _self.yo = _self.y;
      HorizenCast.createColor = function () {
        var r = Math.round(Math.random() * 256),
          g = Math.round(Math.random() * 256),
          b = Math.round(Math.random() * 256);
        return "rgb("+r+","+g+","+b+")";
      }
      _self.cast = function () {
        if (_self.x > canvasWidth - _self.r || _self.y > canvasHeight - _self.r) {
          return;
        }
        var time = (new Date().getTime() - _self.prevTime) / 1000,
          x = _self.xo +_self.vo * time,
          y = _self.yo + 1 / 2 * g * time * time;
        context.beginPath();
        context.fillStyle = HorizenCast.createColor();
        context.arc(_self.x, _self.y, _self.r, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
        _self.x = x;
        _self.y = y;
        setTimeout(function () {
          _self.cast();
        }, 30);
      }
      _self.prevTime = new Date().getTime();
      _self.cast();
    }
    $(document).ready(function () {
      var canvas = document.getElementById("canvas");
      var context = canvas.getContext('2d');
      new HorizenCast(context, { x: 0, y: 0, vo: 100, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 90, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 80, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 70, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 60, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 50, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 40, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 30, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 20, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 10, r: 5 });
      new HorizenCast(context, { x: 0, y: 0, vo: 5, r: 5 });
    });
  </script>
  <style type="text/css" >
  h2 { color:Gray; line-height:50px; }
  #canvas { background:#DDDDDD;}
  </style>
</head>
<body>
 <center>
 <h3>canvas实现平抛效果</h3>
 <hr />
 <canvas id="canvas" width="300" height="300"></canvas>
 <hr />
 </center>
</body>
</html>

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

Javascript 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
JS链式调用的实现方法
Mar 07 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 #Javascript
基于javascript实现动态显示当前系统时间
Jan 28 #Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 #Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 #Javascript
使用node+vue.js实现SPA应用
Jan 28 #Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
You might like
PHP 数字左侧自动补0
2008/03/31 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
php数组使用规则分析
2015/02/27 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
ExtJS下grid的一些属性说明
2009/12/13 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
在vue中给列表中的奇数行添加class的实现方法
2018/09/05 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
Python Requests 基础入门
2016/04/07 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
儿科主治医生个人求职信
2013/09/23 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
小学优秀教师材料
2014/12/15 职场文书
结婚纪念日感言
2015/08/01 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers