suchen

Heim >Web-Frontend >js-Tutorial >jQuery Canvas implementiert einfache Schrägwurf- und Farbdynamiktransformationseffekte_jquery

jQuery Canvas implementiert einfache Schrägwurf- und Farbdynamiktransformationseffekte_jquery

WBOY
WBOYOriginal
2016-05-16 15:17:181688Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie jQuery Canvas einfaches schräges Werfen einer Kugel und dynamische Farbtransformationseffekte implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<!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>

Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“ und „Zusammenfassung gängiger klassischer Spezialeffekte.“ von jQuery"

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vollständiges Beispiel für JavaScript, das die Anzahl der Vorkommen jedes Zeichens in einer Zeichenfolge zählt_javascript-FähigkeitenNächster Artikel：Vollständiges Beispiel für JavaScript, das die Anzahl der Vorkommen jedes Zeichens in einer Zeichenfolge zählt_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen