Dieser Artikel teilt die dynamische Ladeanimation von Canvas Timer für Ihre Referenz. Der spezifische Inhalt ist wie folgt
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> </style> </head> <body> <Canvas id = "canvas"> Ihr Browser unterstützt die Canvas-Technologie </canvas> <cress> <Cress> <Cress> <Script> <Cress> <Cress> <Cress> <Script> <Craft> <Cress> <Cress> <Craft> <Crted> var c = document. var ctx = C.GetContext ('2d'); Ctx.Translate (C. Width/2, C.Height/2); // Zeichnen Sie zuerst 8 statisch verpackte Kreise Funktion create () {für (var i = 1; i <9; i ++) {if (i == 1) {ctx.beginPath (); ctx.arc (0, -30, 5, 0, 2 * math.pi); ctx.fillStyle = '#f0f'; ctx.fill (); } else {ctx.beginPath (); ctx.arc (0, -30, 5, 0, 2 * math.pi); ctx.strokestyle = '#000'; ctx.stroke (); } ctx.rotate (math.pi * 45/180); }} // STACT SetInterval (function () {ctx.clearRect (-c.width/2, -c.Height, C. Width, C.Height); create (); ctx.rotate (math.pi*45/180);}, 300); // Schließen Sie laden laden setTimeout (function () {C.Style.Display = 'None';}, 12200); // </script> </body> </html>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.