บทความนี้แชร์ภาพเคลื่อนไหวแบบไดนามิกการโหลดแบบไดนามิก Canvas สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> <style> </style> </head> <body> <canvas id = "canvas" var ctx = c.getContext ('2d'); CTX.Translate (C.Width/2, C.Height/2); // การวาดครั้งแรก 8 ฟังก์ชั่นวงกลมที่ห่อหุ้มแบบคงที่สร้าง () {สำหรับ (var i = 1; i <9; i ++) {ถ้า (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); }} // switch setInterval (function () {ctx.clearRect (-c.width/2, -c.height, C.Width, c.Height); สร้าง (); ctx.rotate (math.pi*45/180);}, 300); // ปิดการโหลดอย่างใกล้ชิด settimeout (ฟังก์ชั่น () {c.style.display = 'none';}, 12200); // </script> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น