首先要申明本人对于美除了美女真没什么要求。
其次讲讲次学习碰到重要知识点：
1、画圆（弧）：
context.arc(x, y, radius, Math.PI / 180 * startAngle, Math.PI / 180 * endAngle, anticlockwise);
x:横坐标；
y：纵坐标；
y：纵坐标；
radius：半径；
startAngle：Math.PI / 180 这个在数学上表示1度，这边需要用圆弧表示，所以需要多少就写多少。表示弧线开始的角度。
endAngle：同理，表示弧线结束的角度。
anticlockwise：是否逆时针，true：逆时针，false：顺时针。
2、context.moveTo(x, y):将起画坐标移动到某个坐标上。如果不指定则从当前位置开始画。
3、context.translate(x, y)：将(x, y)这个坐标设置成(0,0)；
4、context.save()：用于保存context的设置和变换，可以保存多个通过restore方法返回。可多次调用。
5、context.restore()：用户获取保存的context设置和变换，可多次调用。
直接上代码了：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<meta http-equiv="Refresh" content="1" /> ???<title>canvas draw clcok</title> ???<script> ???????window.onload = function(){ ???????????var drawing = document.getElementById("drawing"); ???????????if(drawing.getContext){ ???????????????var context = drawing.getContext("2d"); ???????????????console.log(context); ???????????????//边框颜色 ???????????????context.fillStyle = "#999"; ???????????????//填充色 字体颜色 ???????????????context.strokeStyle = "#999"; ???????????????//画圆心黑点 ???????????????context.beginPath(); ???????????????context.arc(100, 100, 5, 0, 2*Math.PI, false); ???????????????context.fill(); ???????????????context.closePath(); ???????????????context.beginPath(); ???????????????context.arc(100, 100, 99, 0, 2*Math.PI, false); ???????????????context.moveTo(194, 100); ???????????????context.arc(100, 100, 94, 0, 2*Math.PI, false); ???????????????????????????????context.font=‘bold 16px sans-serif‘; ???????????????context.textAlign=‘center‘; ???????????????context.textBaseline=‘middle‘; ??????????????????????????????context.fillText("1", 145, 30); ???????????????context.fillText("2", 170, 60); ???????????????context.fillText("3", 185, 100); ???????????????context.fillText("4", 170, 140); ???????????????context.fillText("5", 145, 170); ???????????????context.fillText("6", 100, 185); ???????????????context.fillText("7", 55, 170); ???????????????context.fillText("8", 30, 140); ???????????????context.fillText("9", 15, 100); ???????????????context.fillText("10", 30, 60); ???????????????context.fillText("11", 55, 30); ???????????????context.fillText("12", 100, 15); ???????????????context.closePath(); ???????????????var nowDate = new Date(); ???????????????var hours = nowDate.getHours(); ???????????????if(hours > 12){ ???????????????????hours = hours - 12; ???????????????} ???????????????var mins = nowDate.getMinutes(); ???????????????var seconds = nowDate.getSeconds(); ???????????????console.log("hours : " + hours + ",mins : " + mins + ",seconds : " + seconds) ???????????????context.translate(100, 100); ???????????????context.moveTo(0, 0); ???????????????context.save(); //用于保存context的设置和变换，可以保存多个通过restore方法返回。 ???????????????????????????????// 时针 ???????????????context.restore(); ???????????????context.save(); ????????????????context.rotate(Math.PI / 180 * 6 * hours ); ???????????????context.lineTo(0, -50); ???????????????// 分针、 ???????????????context.restore(); ???????????????context.save(); ????????????????context.moveTo(0, 0); ???????????????context.rotate(Math.PI / 180 * 6 * mins); ???????????????context.lineTo(0, -60); ???????????????// 秒针、 ???????????????context.restore(); ???????????????context.moveTo(0, 0); ???????????????context.rotate(Math.PI / 180 * 6 * seconds); ???????????????context.lineTo(0, -70); ???????????????context.stroke(); ???????????} ???????} ???</script></head><body> ???<h2 style="text-align: center;color:#007ACC">clcok</h2> ???<div> ???????<canvas id="drawing" width="500px" height="500px"> ???????</canvas> ???</div> ???</body></html>
原生JS的<canvas>标签画时钟
原文地址：https://www.cnblogs.com/lwxiao/p/10591524.html