JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<canvas id="canvas"></canvas>
<input type="button" value="adjust" id="adjust" />

JavaScript

var Needle=function(speed,length,bunbo){
  this.draw=function(){
    ctx.rotate(Math.PI*2*angle);

    ctx.strokeStyle="red";
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,needlelength*this.intRate());
    ctx.stroke();

    ctx.strokeStyle="white";
    ctx.beginPath();
    ctx.moveTo(0,needlelength*this.intRate());
    ctx.lineTo(0,needlelength);
    ctx.stroke();

    ctx.fillStyle="white";
    ctx.fillText(this.rate(),0,needlelength);

    ctx.rotate(-Math.PI*2*angle);
    angle+=incre;
  };

  this.rate=function(){
    return Math.floor(bunbo*(angle-Math.floor(angle)));
  };
  this.intRate=function(){
    return (angle*bunbo)-Math.floor(angle*bunbo);
  };
    
  this.setAngle=function(data){
    angle=data/bunbo;
  };
    
  var incre=1/(speed/clock);
  var angle=0;
  var needlelength=-(min/2)*length;
  var number=needles.length;
};

var draw=function(){
  var r=min/2;
  for(var i=0;i<needles.length;i++){
    r-=((min/2)*beatWidth)*needles[i].intRate();
  }
  
  ctx.fillStyle="white";
  ctx.fillRect(-width/2,-height/2,width,height);
  ctx.fillStyle="black";
  ctx.beginPath();
  ctx.arc(0,0,r,0,Math.PI*2);
  ctx.fill();

  for(i=0;i<needles.length;i++){needles[i].draw();}
};

var loadDate=function(){
  var d=new Date();
  var s=d.getSeconds();
  var m=d.getMinutes()+s/60;
  var h=d.getHours()+m/60;
  needles[0].setAngle(s);
  needles[1].setAngle(m);
  needles[2].setAngle(h);
};

var width=400;var height=400;
var clock=25;
var beatWidth=0.01;

var min=Math.min(width,height);
var offset=-Math.PI/2;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=width;canvas.height=height;
ctx.translate(width/2,height/2);
ctx.textAlign="center";
ctx.lineWidth=min/200;
ctx.font=(min/15)+"px/"+(min/15)+"px sans-serif";

var needles=[];
needles.push(new Needle(1000*60,0.8,60)); //秒
needles.push(new Needle(1000*60*60,0.6,60)); //分
needles.push(new Needle(1000*60*60*24,0.4,24));...