快捷導(dǎo)航

jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果

更新時間：2016年01月28日 09:52:20 作者：m1870164

這篇文章主要介紹了jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果,通過jQuery結(jié)合html5的canvas技術(shù)調(diào)用時間函數(shù)實時進行數(shù)學(xué)運算,最終實現(xiàn)球體平拋及顏色動態(tài)變換的效果,需要的朋友可以參考下

本文實例講述了jQuery+canvas實現(xiàn)的球體平拋及顏色動態(tài)變換效果。分享給大家供大家參考，具體如下：

運行效果截圖如下：

具體代碼如下：

<!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實現(xiàn)平拋效果</h3>
 <hr />
 <canvas id="canvas" width="300" height="300"></canvas>
 <hr />
 </center>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery動畫與特效用法總結(jié)》及《jQuery常見經(jīng)典特效匯總》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: