Canvas加载动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var RotatingCircle = function () {
  function RotatingCircle(canvas, opts) {
    _classCallCheck(this, RotatingCircle);

this.ctx = canvas.getContext('2d');
    this.size = Math.min(canvas.clientWidth, canvas.clientHeight);
    this.radius = opts.radius;
    this.lineWidth = opts.lineWidth;
    this.strokeStyle = opts.strokeStyle;
    this.degreeStart = opts.degreeStart;
    this.degreeEnd = opts.degreeEnd;
    this.stepStart = opts.stepStart;
    this.stepEnd = opts.stepEnd;
  }

_createClass(RotatingCircle, [{
    key: 'render',
    value: function render() {
      this.degreeStart = this.degreeStart + this.stepStart;
      this.degreeEnd = this.degreeEnd + this.stepEnd;
      if (this.degreeStart - 360 > this.degreeEnd) {
        this.degreeStart -= 720;
      }

this.ctx.clearRect(0, 0, this.size, this.size);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.beginPath();
      this.ctx.strokeStyle = this.strokeStyle;
      this.ctx.arc(this.size / 2, this.size / 2, this.radius - this.lineWidth / 2, (this.degreeStart < this.degreeEnd ? this.degreeStart : this.degreeEnd) * Math.PI / 180, (this.degreeStart < this.degreeEnd ? this.degreeEnd : this.degreeStart) * Math.PI / 180, false);
      this.ctx.stroke();
    }
  }]);

return RotatingCircle;
}();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg