canvas实现刻度时钟&太极

一、刻度时钟

HTML

 <canvas id="myCanvas" width="500px" height="500px">
 </canvas>

注意： 如果不给 设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置 的宽高。
CSS

canvas{
   
      background: #000;
      display: block;
      margin: 50px auto;
    }

JS

var myCanvas=document.getElementById("myCanvas");
var cav=myCanvas.getContext("2d");
setInterval(function(){
   
// 分析时间
var date=new Date()
//1分钟60s，一圈360度
//1s度数为360/60，为6度
var secDeg=date.getSeconds()*6*Math.PI/180;
// 分钟
var min=date.getMinutes()+secDeg/60;
var minDeg=min*6*Math.PI/180;
// 小时
var h=date.getHours()
h>12?h