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

2019-11-20 10:40:14

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 = 0;    var canvasWidth = 0;    var g = 9.8;    function Cast(context, castSettings) {      Cast.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+")";      }      var _self = this;      // x, y, radian, r, v      $.extend(_self, castSettings);      _self.radian = _self.radian / 180 * Math.PI;      _self.vo = _self.v;      _self.vxo = Math.cos(_self.radian) * _self.vo;      _self.vyo = Math.sin(_self.radian) * _self.vo;      console.log("vyo:"+_self.vyo+":vxo:"+_self.vxo+":"+_self.radian);      _self.prevTime = new Date().getTime();      _self.xo = _self.x;      _self.yo = _self.y;      _self.cast = function () {        if (_self.x > canvasWidth - _self.r || _self.y > _self.yo) {          return;        }        var time = (new Date().getTime() - _self.prevTime) / 1000;        var x = _self.vxo * time;        var y = _self.vyo * time - 1 / 2 * g * time * time;        console.log(time+":"+_self.yo+":"+_self.xo+":"+y);        context.beginPath();        context.fillStyle = Cast.createColor();        context.arc(x + _self.xo, _self.yo- y , _self.r, 0, 2 * Math.PI);        context.fill();        context.closePath();        _self.x = x + _self.xo;        _self.y = _self.yo - y;        setTimeout(function () {          _self.cast();        }, 30);      }      _self.cast();    }    $(document).ready(function () {      var canvas = $("#canvas");      var context = canvas.get(0).getContext('2d');      canvasHeight = canvas.height();      canvasWidth = canvas.width();      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 20 });      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 30 });      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 40 });      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 50 });      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 60 });      new Cast(context, { x: 0, y: 400, v: 70, r: 5, radian: 70 });    });  </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="500" height="500"></canvas> <hr /> </center></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

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

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

下一篇：基于javascript实现动态显示当前系统时间