复制代码 代码如下:

<!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>

效果图：


声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。