Beispiel für die Verwendung von HTML5 zum Erstellen von Ladediagramm_html5-Tutorialfähigkeiten

复制代码

代码如下:

<script><br> var Loading = function (canvas, options) {<br> this.canvas = document.getElementById(canvas);<br> this.options = options;<br> };</p> <p> Loading.prototype = {<br> Konstruktor: 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> Farbe: ["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", Optionen);<br> Loading.show();<br> }());<br> </script>

效果图: