| 标题 | 使用html5制作loading图的示例 |
| 范文 | 代码如下: <!doctype html> <html> <head> <title></title> </head> <body> <canvas id = canvas></canvas></p> <p> <script> var loading = function (canvas, options) { this.canvas = document.getelementbyid(canvas); this.options = options; };</p> <p> loading.prototype = { constructor: loading, show: function () { var canvas = this.canvas, begin = this.options.begin, old = this.options.old, linewidth = this.options.linewidth, canvascenter = {x: canvas.width / 2, y: canvas.height / 2}, ctx = canvas.getcontext(2d), color = this.options.color, num = this.options.num, angle = 0, linecap = this.options.linecap, const_pi = math.pi * (360 / num) / 180; window.timer = setinterval(function () { ctx.clearrect(0, 0, canvas.width, canvas.height); for (var i = 0; i < num; i += 1) { ctx.beginpath(); ctx.strokestyle = color[num - 1 - i]; ctx.linewidth = linewidth; ctx.linecap= linecap; ctx.moveto(canvascenter.x + math.cos(const_pi * i + angle) * begin, canvascenter.y + math.sin(const_pi * i + angle) * begin); ctx.lineto(canvascenter.x + math.cos(const_pi * i + angle) * old, canvascenter.y + math.sin(const_pi * i + angle) * old); ctx.stroke(); ctx.closepath(); } angle += const_pi; console.log(angle) },50); }, hide: function () { clearinterval(window.timer); } };</p> <p> (function () { var options = { num : 8, begin: 20, old: 40, linewidth: 10, linecap: round, 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)] }; var loading = new loading(canvas, options); loading.show(); }()); </script> </body> </html> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。