从绘制时钟到环形进度条

1、页面布局

#clock{
	width: 500px;
	height: 500px;
	position: relative;
	background-color: yellow;
}
#clock canvas{
	position: absolute;
	top: 0;
	left: 0;
}

<div id="clock"></div>

2、绘制时钟刻度

var clock = document.getElementById("clock");
        var scale = document.createElement("canvas");
        var scale_ctx = scale.getContext("2d");
        scale.width = 500;
        scale.height = 500;
        clock.appendChild(scale);
        //绘制圈
        scale_ctx.beginPath();
        scale_ctx.strokeStyle = 'blue'
        scale_ctx.lineWidth = 5;
        scale_ctx.arc(250,250,200,0,2*Math.PI,false);
        scale_ctx.stroke();
        scale_ctx.closePath();
        //绘制刻度
        for (var i = 0; i < 12; i++){
            scale_ctx.save();
            scale_ctx.beginPath();
            scale_ctx.strokeStyle = 'black';
            scale_ctx.lineWidth = 7;
            scale_ctx.translate(250,250);
            scale_ctx.rotate(i*30*Math.PI/180);
            scale_ctx.moveTo(0,-170);
            scale_ctx.lineTo(0,-190);
            scale_ctx.stroke();
            scale_ctx.closePath();
            scale_ctx.restore();
        }
        for (var i = 0; i < 60; i++){
            scale_ctx.save();
            scale_ctx.beginPath();
            scale_ctx.strokeStyle = 'black';
            scale_ctx.translate(250,250);
            scale_ctx.rotate(i*6*Math.PI/180);
            scale_ctx.moveTo(0,-180);
            scale_ctx.lineTo(0,-190);
            scale_ctx.stroke()
            scale_ctx.closePath();
            scale_ctx.restore();
        }

View Code