-
##表盘
1.初始化
将圆心调整到画布的中间
由于canvas中画圆与旋转所参照的坐标系于正常坐标系有出入
将整个画布逆时针旋转90度
初始化一些样式数据
ctx.lineWidth = 8;
ctx.strokeStyle = "black";
ctx.lineCap = "round";
2.外层空心圆盘
圆盘颜色:#325FA2
圆盘宽度:14
圆盘半径:140
3.时针刻度
长度为20
宽度为8
外层空心圆盘与时针刻度之间的距离也为20
4.分针刻度
宽度为4
长度为3
5.时针
宽度为14
圆心外溢出80 收20
6.分针
宽度为10
圆心外溢出112 收28
7.秒针
颜色:D40000
宽度为6
圆心外溢出83 收30
---->中心实心圆盘
半径为10
---->秒针头
96码开外半径为10的空心圆
宽度为6
绘制钟表：
demo地址：https://github.com/Hightinstance/practice/blob/master/Clocks/index.html
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; background: pink; } #clock{ background: gray; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); } </style> </head> <body> <canvas id="clock" width="400" height="400"></canvas> </body> <script type="text/javascript"> window.onload = function(){ //画表盘 var clock = document.querySelector("#clock"); if(clock.getContext) { var ctx = clock.getContext("2d"); move(); setInterval(function(){ //每次清除画布 ctx.clearRect(0,0,clock.width,clock.height); move(); },1000); } function move(){ //外圈 ctx.save(); //钟表样式 ctx.lineWidth = 8; ctx.strokeStyle = "black"; ctx.lineCap = "round"; //中心点的坐标和坐标系转换 ctx.translate(200,200); ctx.rotate(-90*Math.PI/180); ctx.beginPath(); //画圆 ctx.save();//存储外部表盘的样式 ctx.strokeStyle = "#325FA2"; ctx.lineWidth = 14; ctx.beginPath(); ctx.arc(0,0,140,0,360); ctx.stroke(); ctx.restore(); //时针 // 长度为20 // 宽度为8 // 外层空心圆盘与时针刻度之间的距离也为20,画12个,旋转30度 ctx.save(); //相同的样式不需要清除 for(var i=0;i<12;i++) { ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(100,0); ctx.lineTo(120,0); ctx.stroke(); ctx.rotate(30*Math.PI/180); } ctx.restore(); //分针同样的套路 ctx.save(); //相同的样式不需要清除 for(var i=0;i<60;i++) { ctx.lineWidth = 4; ctx.beginPath(); ctx.moveTo(117,0); ctx.lineTo(120,0); ctx.stroke(); ctx.rotate(6*Math.PI/180); } ctx.restore(); var date = new Date(); var s = date.getSeconds(); var m = date.getMinutes()+s/60; var h = date.getHours()+m/60; //12小时制 h=h>12?h-12:h; //画分针，时针，秒针， //时针 ctx.save(); ctx.lineWidth = 14; ctx.rotate(h*30*Math.PI/180); ctx.beginPath(); ctx.moveTo(-20,0); ctx.lineTo(80,0); ctx.stroke(); ctx.restore(); //分针 ctx.save(); ctx.lineWidth = 10; ctx.rotate(m*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(-28,0); ctx.lineTo(112,0); ctx.stroke(); ctx.restore(); //秒针 ctx.save(); ctx.lineWidth = 6; ctx.strokeStyle = "#D40000"; ctx.fillStyle = "#D40000"; ctx.rotate(s*6*Math.PI/180); ctx.beginPath(); ctx.moveTo(-30,0); ctx.lineTo(83,0); ctx.stroke(); //中心圆 ctx.beginPath(); ctx.arc(0,0,10,0,360); ctx.fill(); //表头 ctx.beginPath(); ctx.arc(96,0,10,0,360); ctx.stroke(); //秒针清空样式 ctx.restore(); //最后清空，坐标系和原点需要使用 ctx.restore(); } } </script> </html>