이 기사는 참조를 위해 Canvas 타이머 동적로드 애니메이션을 공유합니다. 특정 내용은 다음과 같습니다
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> </style> </head> <body> <canvas id = "canvas"> 브라우저는 캔버스 기술을 지원하지 않습니다 </canvas> <script> var c = var c = canvas '); var ctx = c.getContext ( '2d'); ctx.translate (c.width/2, c.height/2); // 첫 번째 그리기 8 정적으로 랩핑 된 원 함 함수 create () {for (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); }} // setInterVal (function () {ctx.clearRect (-C.Width/2, -C. Height, C.Width, C.Height); Create (); CtX.Rotate (Math.pi*45/180);}, 300); // settimeout로드를 적절하게 닫습니다 (function () {c.style.display = 'none';}, 12200); // </script> </body> </html>위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.