Example of using html5 to create loading diagram_html5 tutorial skills

复制代码

代码如下:

<script><br> var Loading = function (canvas, options) {<br> this.canvas = document.getElementById(canvas);<br> this.options = options;<br> };</p> <p> Loading.prototype = {<br> constructor: Loading,<br> show: function () {<br> var canvas = this.canvas,<br> begin = 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> color = 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 angle) * begin, canvasCenter.y Math.sin(CONST_PI * i angle) * begin);<br> ctx.lineTo(canvasCenter.x Math.cos(CONST_PI * i angle) * old, canvasCenter.y Math.sin(CONST_PI * i angle) * old);<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> begin: 20,<br> old: 40,<br> lineWidth: 10,<br> lineCap: "round",<br> color: ["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>

效果图：