js做一个时钟效果

html部分

 <canvas id="clock" width="600px" height="600px"  style="border:1px solid  white;"></canvas>

script部分

let dom = document.getElementById('clock');

    let ctx = dom.getContext('2d');

    let width = ctx.canvas.width;

    let height = ctx.canvas.height;

    var r = width / 2;

    var rem = width / 200;

    function drawBackground() {

        ctx.save();

        ctx.translate(r, r);

        ctx.beginPath();  //每次开始前必须开始一条路径

        //按比例输出边框宽度，width/200=x/10=rem; 即 x=10 *rem

        ctx.lineWidth = 10 * rem;

        ctx.arc(0, 0, r - ctx.lineWidth, 0, 2 * Math.PI, false);

        ctx.strokeStyle = "skyblue"

        ctx.stroke();