首先 搭建canvas画布格式：
动态获取画布的宽和高方便变换，利用translate将圆中心坐标改为0 0；
<canvas width="800px" height="800px"></canvas> ???????<script> ???????????????????????var canvas=document.querySelector("canvas"); ???????????var ctx=canvas.getContext("2d"); ???????????var width=ctx.canvas.width; ???????????var height=ctx.canvas.height; ???????????var r=width/2 ???????????ctx.translate(r,r)第一步 绘制表盘：
利用save来保存当前状态 restore返回之前保存过的状态 ，保证前后不受影响
先用画圆属性arc（）绘制一个圆圈
定义一个数组将时间刻度装起来，用for循环来循环添加到变盘上
首先获取到刻度之间的角度，然后利用三角函数得到刻度的位置，最后利用filltext将文本添加上去
function biao(){ ???????????//边框 ???????????????????ctx.save(); ???????????????????ctx.beginPath() ???????????????ctx.arc(0,0,r-5,0,2*Math.PI,false) ???????????????ctx.lineWidth=10 ???????????????ctx.stroke() ???????????//时间刻度 ???????????var unm=[3,4,5,6,7,8,9,10,11,12,1,2] ???????????????????ctx.font = "18px Arial"; ???????????????ctx.textAlign = "center"; ???????????????ctx.textBaseline = "middle" ???????????for(i=0;i<unm.length;i++){ ???????????????var edg=2*Math.PI/12*i ???????????????var x=Math.cos(edg)*(r-50) ???????????????var y=Math.sin(edg)*(r-50) ???????????????ctx.fillText(unm[i],x,y) ???????????} ???????????//边刻 ???????????for(j=0;j<60;j++){ ???????????????ctx.beginPath() ???????????????var rng=2*Math.PI/60*j ???????????????var x=Math.cos(rng)*(r-30) ???????????????var y=Math.sin(rng)*(r-30) ???????????????if(j%5==0){ ???????????????????ctx.fillStyle="black" ???????????????}else{ ???????????????????ctx.fillStyle="#ccc" ???????????????} ???????????????ctx.arc(x,y,2,0,2*Math.PI,false) ???????????????ctx.fill() ???????????} ???????????ctx.restore() ????????????}第二步 绘制时针：
现获取到每小时之间的弧度
时针是需要跟随分针改变的
所以需要加上分针对时针的影响得弧度才能的到时正真转动的弧度
//时针 ???????????function hour(shi,fen){ ???????????????ctx.save(); ???????????????ctx.beginPath() ???????????????var rad=2*Math.PI/12*shi ???????????????//分对时的影响 ???????????????var rad1=2*Math.PI/60*fen ???????????????ctx.rotate(rad+rad1) ???????????????ctx.lineCap="round"; ????????????????ctx.lineWidth=6 ???????????????ctx.moveTo(0,10) ???????????????ctx.lineTo(0,-r/2) ???????????????ctx.stroke() ???????????????ctx.restore() ????????????}第三步 绘制分针
//分 ???????????function minute(fen){ ???????????????ctx.save(); ????????????????ctx.beginPath() ???????????????var rad=2*Math.PI/60*fen ???????????????ctx.rotate(rad) ???????????????ctx.lineCap="round"; ????????????????ctx.lineWidth=4 ???????????????ctx.moveTo(0,10) ???????????????ctx.lineTo(0,-r+120) ???????????????ctx.stroke() ???????????????ctx.restore() ????????????}第四步 绘制秒针
//秒 ???????????function seccond(miao){ ???????????????ctx.save(); ????????????????ctx.beginPath() ???????????????var rad=2*Math.PI/60*miao ???????????????ctx.rotate(rad) ????????????????ctx.moveTo(-2,20) ???????????????ctx.lineTo(2,20) ???????????????ctx.lineTo(0,-r+70) ???????????????ctx.lineTo(-2,20) ???????????????ctx.fillStyle="aquamarine" ???????????????ctx.fill() ???????????????ctx.restore() ????????????}第五步 调用函数，将时间参数添加进去，利用定时器一秒触发一次
function show(){ ???????????????ctx.clearRect(-r,-r,width,height) ???????????????var time=new Date(); ???????????????var miao=time.getSeconds(); ???????????????var fen=time.getMinutes(); ???????????????var shi=time.getHours(); ???????????????hour(shi,fen) ???????????????minute(fen) ???????????????seccond(miao) ???????????????biao() ???????????} ???????????setInterval(show,1000)完整代码
<!DOCTYPE html><html> ???<head> ???????<meta charset="utf-8" /> ???????<title></title> ???????<style> ???????????canvas{ ???????????????border: 1px solid black; ???????????} ???????</style> ???</head> ???<body> ???????<canvas width="800px" height="800px"></canvas> ???????<script> ???????????????????????var canvas=document.querySelector("canvas"); ???????????var ctx=canvas.getContext("2d"); ???????????var width=ctx.canvas.width; ???????????var height=ctx.canvas.height; ???????????var r=width/2 ???????????ctx.translate(r,r) ???????????function biao(){ ???????????//边框 ???????????????ctx.save(); ???????????????ctx.beginPath() ???????????????ctx.arc(0,0,r-5,0,2*Math.PI,false) ???????????????ctx.lineWidth=10 ???????????????ctx.stroke() ???????????//时间刻度 ???????????var unm=[3,4,5,6,7,8,9,10,11,12,1,2] ???????????????ctx.font = "18px Arial"; ???????????????ctx.textAlign = "center"; ???????????????ctx.textBaseline = "middle" ???????????for(i=0;i<unm.length;i++){ ???????????????var edg=2*Math.PI/12*i ???????????????var x=Math.cos(edg)*(r-50) ???????????????var y=Math.sin(edg)*(r-50) ???????????????ctx.fillText(unm[i],x,y) ???????????} ???????????//边刻 ???????????for(j=0;j<60;j++){ ???????????????ctx.beginPath() ???????????????var rng=2*Math.PI/60*j ???????????????var x=Math.cos(rng)*(r-30) ???????????????var y=Math.sin(rng)*(r-30) ???????????????if(j%5==0){ ???????????????????ctx.fillStyle="black" ???????????????}else{ ???????????????????ctx.fillStyle="#ccc" ???????????????} ???????????????ctx.arc(x,y,2,0,2*Math.PI,false) ???????????????ctx.fill() ???????????} ???????????ctx.restore() ????????????} ???????????????????????//时针 ???????????function hour(shi,fen){ ???????????????ctx.save(); ???????????????ctx.beginPath() ???????????????var rad=2*Math.PI/12*shi ???????????????//分对时的影响 ???????????????var rad1=2*Math.PI/60*fen ???????????????ctx.rotate(rad+rad1) ???????????????ctx.lineCap="round"; ????????????????ctx.lineWidth=6 ???????????????ctx.moveTo(0,10) ???????????????ctx.lineTo(0,-r/2) ???????????????ctx.stroke() ???????????????ctx.restore() ????????????} ???????????//分 ???????????function minute(fen){ ???????????????ctx.save(); ????????????????ctx.beginPath() ???????????????var rad=2*Math.PI/60*fen ???????????????ctx.rotate(rad) ???????????????ctx.lineCap="round"; ????????????????ctx.lineWidth=4 ???????????????ctx.moveTo(0,10) ???????????????ctx.lineTo(0,-r+120) ???????????????ctx.stroke() ???????????????ctx.restore() ????????????} ???????????//秒 ???????????function seccond(miao){ ???????????????ctx.save(); ????????????????ctx.beginPath() ???????????????var rad=2*Math.PI/60*miao ???????????????ctx.rotate(rad) ????????????????ctx.moveTo(-2,20) ???????????????ctx.lineTo(2,20) ???????????????ctx.lineTo(0,-r+70) ???????????????ctx.lineTo(-2,20) ???????????????ctx.fillStyle="aquamarine" ???????????????ctx.fill() ???????????????ctx.restore() ????????????} ???????????function show(){ ???????????????ctx.clearRect(-r,-r,width,height) ???????????????var time=new Date(); ???????????????var miao=time.getSeconds(); ???????????????var fen=time.getMinutes(); ???????????????var shi=time.getHours(); ???????????????hour(shi,fen) ???????????????minute(fen) ???????????????seccond(miao) ???????????????biao() ???????????} ???????????setInterval(show,1000) 效果图
结合js利用画布制作一个时钟
原文地址：https://www.cnblogs.com/xuhanghang/p/10110536.html