JSFiddle - React, Tailwind, and code Playground

by redky

HTML

<canvas id="canvas" width="400" height="300"></canvas>

JavaScript

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
context.fillStyle = '#f5f5f5';
context.fillRect(0, 0, 400, 300);
var drawCircle = function(deg, color) {
  context.save();
  context.translate(200, 150); //将旋转中心移动到画布中心
  context.rotate(Math.PI / 180 * deg);
  context.fillStyle = color;
  context.fillRect(-100, 0, 5, 5); //绘制单位点
  context.restore();
};
var deg = 0, count = 0;
var id = setInterval(function() {
  deg += 1;
  if (deg > 360) { //完成一个圆的绘制后重新开始绘制
    count += 1;
    deg = 0;
    if (count >= 5) { //完成了5个圆的绘制后停止绘制
      window.clearInterval(id);
      return false;
    }
    context.clearRect(0, 0, 400, 300);
    context.fillStyle = '#f5f5f5';
    context.fillRect(0, 0, 400, 300);
  }
  var color =  '#' + Math.floor(Math.random() * 0xffffff).toString(16);//生成随机颜色
  drawCircle(deg, color);
}, 16.7);