Exemple d'utilisation de HTML5 pour créer des compétences de didacticiel de chargement de diagramme_html5

复制代码

代码如下 :

<script><br> var Chargement = fonction (canevas, options) {<br> this.canvas = document.getElementById(canvas);<br> this.options = options;<br> };</p> <p> Loading.prototype = {<br> constructeur : Chargement,<br> show : function () {<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> 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 ; je < 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) * commencer, canvasCenter.y Math.sin(CONST_PI * i angle) * commencer);<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> cacher : function () {<br> clearInterval(window.timer); <br> }<br> };</p> <p> (function () {<br> var options = {<br> num : 8,<br> début : 20,<br> ancien : 40,<br> lineWidth : 10,<br> lineCap : "round",<br> couleur : ["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 chargement = new Loading("canvas", options);<br> chargement.show();<br> }());<br> </script>

效果图：