html 代码
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>Document</title>
- </head>
- <body>
- <canvas id="mycanvas"></canvas>
- </body>
- <script>
- /* 插件代码 - 开始 */
- (function () {
- var round = function (selector, options) {
- var _options = options || {};
- var devicePixelRatio = Windows.devicePixelRatio || 1;
- var backingStoreRatio;
- var context;
- this.can = document.getElementById(selector);
- this.ctx = context = this.can.getContext('2d');
- backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio ||
- context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio ||
- 1;
- this.ratio = devicePixelRatio / backingStoreRatio;
- this.speed = _options.speed || 1000;
- this.lineColor = _options.lineColor || '#000';
- this.lineWidth = (_options.lineWidth || 2) * this.ratio;
- this.can.style.width = this.can.style.height = (_options.width || 80) + 'px';
- this.can.width = this.can.height = this.width = (_options.width || 80) * this.ratio;
- if (_options.auto === true) {
- this._start();
- }
- };
- round.prototype = {
- _start: function () {
- var halfWidth = this.halfWidth = this.width / 2;
- this.radian = 0;
- this.ctx.beginPath();
- this.ctx.strokeStyle = this.lineColor;
- this.ctx.lineWidth = 1;
- this.ctx.clearRect(0, 0, this.width, this.width);
- this.ctx.arc(halfWidth, halfWidth, halfWidth - (2 * this.ratio), 0, Math.PI * 2);
- this.ctx.stroke();
- this.draw();
- },
- start: function () {
- this.draw();
- },
- stop: function () {
- clearInterval(this.timer);
- },
- draw: function () {
- var me = this;
- this.ctx.strokeStyle = this.lineColor;
- this.ctx.lineWidth = this.lineWidth;
- this.timer = setInterval(function () {
- if (me.radian <2) {
- me._draw(me.radian);
- me.radian += 0.01;
- } else {
- clearInterval(me.timer);
- me._start();
- }
- }, this.speed / 10);
- },
- _draw: function (radian) {
- var halfWidth = this.halfWidth,
- _radian = radian + 0.01;
- this.ctx.beginPath();
- this.ctx.arc(halfWidth, halfWidth, halfWidth - (2 * this.ratio), Math.PI * radian, Math.PI *
- _radian);
- this.ctx.stroke();
- }
- };
- Windows.canvasround = round;
- })();
- /* 插件代码 - 结束 */
- /* 插件使用方法示例 - 开始 */
- round = new canvasround('mycanvas', {
- // 参数可不传, 所有数值建议为偶数.
- width: 80, // 画布的宽度
- lineWidth: 4, // 粗线的宽度
- lineColor: '#000', // 线的颜色
- speed: 1000, // 轮播切换的速度
- // auto:true // 是否马上开始动画. 不建议马上播放, 使用 start 方法, 在 swiper 的回调函数中使用.
- });
- round.start() // 开始动画
- // round.stop() // 暂停动画, 可通过再次调用 start 方法, 继续动画
- /* 插件使用方法示例 - 结束 */
- </script>
- </HTML>
来源: http://www.qdfuns.com/article/17085/129041e305d4c5639fc9eff9027c34dd.html