suchen

Heim >Web-Frontend >js-Tutorial >Vollständiges Beispiel eines brillanten Kreiseffekts basierend auf Canvas_Javascript-Fähigkeiten

Vollständiges Beispiel eines brillanten Kreiseffekts basierend auf Canvas_Javascript-Fähigkeiten

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

Das Beispiel in diesem Artikel beschreibt den brillanten Kreiseffekt auf Leinwandbasis. 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>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; background:black;
   }
   #canvas {
    border:3px solid gray; box-shadow:0px 0px 2px 2px #D5D5D5; margin-left:100px; margin-top:50px;
   }
   #power {
    position:fixed; bottom:50px; right:50px; 
   }
   #power a {
    color:green; text-decoration:none; display:inline-block; padding:20px; border:2px solid orange; box-shadow:0px 0px 2px 2px blue;
    font-size:30px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   var colorList = "abcdefABCDEF0123456789".split("");
   var colorListLength = colorList.length;
   var arcList = [];
   function createArc(attr) {
    ctx.beginPath();
    ctx.fillStyle = attr.color || "black";
    ctx.arc(attr.x, attr.y, attr.r, 0, Math.PI*2);
    ctx.closePath();
    ctx.fill();
   }
   function color() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += colorList[Math.round(Math.random()*colorListLength)];
    }
    return color;
   }
   function Arc() {
    this.count = 0;
    this.r = 5;
    this.x = Math.round(Math.random()*500);
    this.add = Math.round(Math.random()*5);
    this.limit = Math.round(Math.random()*100)
    this.mode = Math.round(Math.random());
    var _self = this;
    _self.run = function() {
     if(_self.r >= _self.limit) {
      _self.run = null;
      return;
     }
     _self.x += _self.add*(_self.mode == 1 &#63; 1 : -1);
     createArc({x: _self.x, y:Math.round(Math.random()*400), r: _self.r, color: color()});
     _self.r += 5;
     return _self;
    };
    return this;
   }
   var init_count = 150;
   var init_time = 0;
   var init = function() {
    init_time++;
    arcList.length = 0;
    for(var i=0; i<init_count; i++) {
     arcList.push(new Arc());
    }
   };
   var reInit = function() {
    var angle = Math.PI*2/init_count;
    for(var i=0; i<init_count; i++) {
     var _angle = i*angle;
     createArc({x: 250 + 250*Math.cos(_angle), y: 250 + 250*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 200*Math.cos(_angle), y: 250 + 200*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 150*Math.cos(_angle), y: 250 + 150*Math.sin(_angle), r: 5, color:color()});
     createArc({x: 250 + 100*Math.cos(_angle), y: 250 + 100*Math.sin(_angle), r: 5, color:color()});
    }
   };
   init();
   var globalInterval = setInterval(function() {
    ctx.clearRect(0, 0, 500, 500);
    var count = 0;
    for(var i=0; i<init_count; i++) {
     var arc = arcList[i];
     arc.run &#63; arc.run() : count++;
    }
    if(count == init_count) {
     if(init_time >= 2) {
      reInit();
      return;
     }
     init();
    }
   }, 100);
  </script>
 </body>
</html>

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

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

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：Zusammenstellung von JavaScript-Tipps (sehr vollständig)_Javascript-TippsNächster Artikel：Zusammenstellung von JavaScript-Tipps (sehr vollständig)_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen