html5 を使用してローディング図を作成する例_html5 チュートリアル スキル

复制代码

代码如下:

<script><br> var Loading = function (canvas, options) {<br> this.canvas = document.getElementById(canvas);<br> this.options = options;<br> };</p> <p> Loading.prototype = {<br> コンストラクター: 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 / 数値) / 180;<br> window.timer = setInterval(function () {<br> ctx.clearRect(0, 0, Canvas.width, Canvas.height);<br> for (var i = 0) ; i ctx.beginPath();<br> ctx.ストロークスタイル = 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.stroking();<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> カラー: ["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> varloading = new Loading("canvas", options);<br>loading.show();<br> }());<br> </script>

效果图：