html5를 사용하여 로딩 Diagram_html5 튜토리얼 기술을 생성하는 예

<script><br> var Loading = 함수(캔버스, 옵션) {<br> this.canvas = document.getElementById(canvas);<br> this.options = options;<br> };</p> <p> Loading.prototype = {<br> 생성자: Loading,<br> 표시: 함수() {<br> var canvas = this.canvas,<br> start = this.options.begin,<br> old = this.options .old,<br> lineWidth = this.options.lineWidth,<br> canvasCenter = {x: canvas.width / 2, y: canvas.height / 2},<br> ctx = canvas.getContext("2d") ,<br> 색상 = this.options.color,<br> num = this.options.num,<br> angle = 0,<br> lineCap = this.options.lineCap,<br> CONST_PI = Math.PI * (360 / num) / 180;<br> window.timer = setInterval(function () {<br> ctx.clearRect(0, 0, canvas.width, canvas.height);<br> for (var i = 0 ; i < num; i = 1) {<br> ctx.beginPath();<br> ctx.StrokeStyle = color[num - 1 - i];<br> ctx.lineWidth = lineWidth;<br> ctx. lineCap= lineCap;<br> ctx.moveTo(canvasCenter.x Math.cos(CONST_PI * i 각도) * 시작, canvasCenter.y Math.sin(CONST_PI * i 각도) * 시작);<br> ctx.lineTo(canvasCenter .x Math.cos(CONST_PI * i 각도) * 이전, canvasCenter.y Math.sin(CONST_PI * i 각도) * 이전);<br> ctx.Stroke();<br> ctx.closePath();<br> }<br> angle = CONST_PI;<br> console.log(angle)<br> },50);<br> },<br> hide: function () {<br>clearInterval(window.timer); <br> }<br> };</p> <p> (function () {<br> var options = {<br> num : 8,<br> start: 20,<br> old: 40,<br> lineWidth: 10,<br> lineCap: "round",<br> 색상: ["rgb(0, 0, 0)", "rgb(20, 20, 20)","rgb(40, 40, 40)", "rgb(60, 60, 60)"," rgb(80, 80, 80)", "rgb(100, 100, 100)", "rgb(120, 120, 120)", "rgb(140, 140, 140)"]<br> };<br> var loading = new Loading("canvas", options);<br> loading.show();<br> }());<br> </script>