1、 使用 html5 制作 loading 图的示例代码如下:!DOCTYPE htmlhtmlheadtitle/title/headbodycanvas id = “canvas“/canvas/p p scriptvar Loading = function (canvas, options) this.canvas = document.getElementById(canvas);this.options = options;/p p Loading.prototype = constructor: Loading,show: function () var canvas = this
2、.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 / n
3、um) / 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 = colornum - 1 - i;ctx.lineWidth = lineWidth;ctx.lineCap= lineCap;ctx.moveTo(canvasCenter.x + Math.cos(CONST_PI * i + angle) * begin, canva
4、sCenter.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 (func
5、tion () 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效果图：
