Canvas 绘制时钟_技术笔记

依依若蝶 2018-02-14

画秒针和中心原点

截图
0赞 · 0采集
依依若蝶 2018-02-14

画时针分针

截图
0赞 · 0采集
慕仰8118372 2017-11-07

为什么我把分针加到时针上去，就啥都不现实了，为什么了？

截图
0赞 · 0采集
宝慕林3045059 2017-10-11

//时针 function drawHour(hour){ ctx.beginPath(); var rad=2*Math.PI/12*hour; ctx.rotate(rad); ctx.lineWidth=6; ctx.lineCap='round';//两端样式 ctx.moveTo(0,10);// 把路径移动到画布中的指定点，不创建线条 ctx.lineTo(0,-r/2);//添加一个新点，然后在画布中创建从该点到最后指定点的线条,负轴为正 ctx.stroke(); }

0赞 · 0采集
慕九州5529666 2017-04-10

1

0赞 · 0采集
慕粉2110096945 2017-03-27

开始画时针

截图
0赞 · 0采集
qq_相摸盲人_0 2017-03-05

画秒钟

截图
0赞 · 0采集
慕码人8285780 2017-02-01

javascript:;

截图
0赞 · 0采集
qq_喵呜我姓易_04380998 2017-01-24

秒针画法

截图
0赞 · 0采集
异常代码 2016-12-28

Rotate

0赞 · 0采集
天草流 2016-12-13

//画出时分秒交汇处的圆点 function drawDot(){ ctx.beginPath(); ctx.fillStyle = "#fff"; ctx.arc(0,0,3,0,2*Math.PI,false);//画一个实心圆 ctx.fill(); }

1赞 · 0采集
天草流 2016-12-13

//画秒针 function drawSecond(second){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 ctx.fillStyle = "#c14543";//填充为红色 var rad = 2 * Math.PI / 60 * second ;//需要旋转的弧度 ctx.rotate(rad); ctx.moveTo(-2,20); //移动划线的原点到圆点下面一点 ctx.lineTo(2,20); ctx.lineTo(1,-r+18); ctx.lineTo(-1,-r+18); ctx.fill(); ctx.restore();//返回之前保存过的路径状态和属性 }

1赞 · 0采集
天草流 2016-12-13

//画分针 function drawMinute(minute){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 var rad = 2 * Math.PI / 60 * minute ;//需要旋转的弧度 ctx.rotate(rad); ctx.lineWidth = 3 ;//定义分针线的宽度 ctx.lineCap = "round";//设置时针线端点为圆的 ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo( 0 , -r + 30); //画出这条线 ctx.stroke(); //最终画出这条时针线 ctx.restore();//返回之前保存过的路径状态和属性 }

1赞 · 0采集
天草流 2016-12-13

//画时针 function drawHour(hour,minute){ ctx.save();//保存当前环境的状态 ctx.beginPath();//画出竖着的那个时针的线 var rad = 2 * Math.PI / 12 * hour ;//时针旋转的弧度 var mrad = 2 * Math.PI / 12 / 60 * minute;//分针旋转的弧度 ctx.rotate(rad + mrad); ctx.lineWidth = 6 ;//定义时针线的宽度 ctx.lineCap = "round";//设置时针线端点为圆的 ctx.moveTo(0,10); //移动划线的原点到圆点下面一点 ctx.lineTo(0,-r/2); //画出这条线 ctx.stroke(); //最终画出这条时针线 ctx.restore();//返回之前保存过的路径状态和属性 }

2赞 · 1采集
天草流 2016-12-13

for(var i = 1 ; i <= 60 ; i++){ //画60个点 var rad = 2 * Math.PI / 60 * i;//求每个点对应的弧度 var x = Math.cos(rad) * (r - 18);//求x坐标 var y = Math.sin(rad) * (r - 18);//求y坐标 ctx.beginPath();//重置一条路径 //判断，若是整点为黑色，其他为灰色 if( i % 5 == 0 ){ ctx.fillStyle = "#000" ; //设置填充颜色为黑色 ctx.arc(x,y,2,0,2*Math.PI,false);//画一个实心圆 }else{ ctx.fillStyle = "#ccc" ; //设置填充颜色为灰色 ctx.arc(x,y,2,0,2*Math.PI,false);//画一个实心圆 } ctx.fill();//填充这个实心圆点 }

2赞 · 1采集
天草流 2016-12-13

function drawBackground(){ ctx.translate(r,r);//重新定义原点坐标为（r,r） ctx.beginPath();//起始一条路径 ctx.lineWidth = 10; ctx.arc(0,0,r-5,0,2*Math.PI,false);//画圆，前两个0为圆点xy坐标，r为半径，中间的0为起始角 //2*Math.PI为结束角，flase为顺时针（此时圆还没有画出来） ctx.stroke();//绘制已定义路径 var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];//定义一个数组，存储12个小时数 ctx.font = "18px Arial"; ctx.textAlign = "center";//左右对齐 ctx.textBaseline = "middle";//上下对齐 //遍历数组，获取每一个小时数的坐标，然后填上数字 hourNumbers.forEach(function(number,i){//number是数字，i是索引 var rad = 2 * Math.PI / 12 * i //求弧度,此时为i对应的弧度 var x = Math.cos(rad) * (r - 30);//求x坐标 var y = Math.sin(rad) * (r - 30);//求y坐标 ctx.fillText(number,x,y);//在画布上绘制“被填充”的文本 });

4赞 · 1采集
天草流 2016-12-13

var dom = document.getElementById("clock"); //定义dom变量来获取canvas元素 var ctx = dom.getContext("2d"); //获取它的上下文 var width = ctx.canvas.width; //获取canvas的高 var height = ctx.canvas.height ; //获取canvas的宽 var r = width / 2 ; //获取半径（可能不是实际半径）

2赞 · 1采集
qweqwe13123123 2016-12-08

小时这里需要修改加上分钟的弧度特别注意的是要 /12 /60

截图
0赞 · 1采集
qweqwe13123123 2016-12-08

中心白色圆点部分 beginPath 画线 fillStyle 颜色 arc 画圆 fill 绘画线条

截图
0赞 · 0采集
qweqwe13123123 2016-12-08

秒钟部分有点搞不懂那三条 lineTo 对应的是哪个方向。

截图
0赞 · 0采集
qweqwe13123123 2016-12-08

分钟部分同理。。。。

截图
0赞 · 0采集
qweqwe13123123 2016-12-08

画东西之前先加一个 beginPath lineWidth 定义线的宽度 lineCap 把线条结束端 round圆 moveTo 把路径移动到指定点不创建线条 lineTo 添加新点在画布创建从该点到最后指定点 stroke 绘制定义路径弧度 rad = 2 * π 除以12 * 牵引记住画图形一定要加一组save restore 不然会影响画布。

截图
0赞 · 0采集
慕工程2957023 2016-11-29

//秒针 function drawSecond(second){ ctx.save(); ctx.fillStyle="#a45"; var rad=2*Math.PI/60*second; ctx.rotate(rad); ctx.beginPath(); ctx.moveTo(-2,15); ctx.lineTo(2,15); ctx.lineTo(1,-r+30); ctx.lineTo(-1,-r+30); ctx.fill(); ctx.restore(); } //中间的点 function drawDot(){ ctx.fillStyle="#fff"; ctx.beginPath(); ctx.arc(0,0,3,0,2*Math.PI,false); ctx.fill(); }

0赞 · 0采集
慕工程2957023 2016-11-29

//时针 function drawHour(hour,minute){ ctx.save();//保存当前的画布状态 var rad=2*Math.PI/12*hour+2*Math.PI/12/60*minute; ctx.rotate(rad);//旋转画布 ctx.rotate(rad); ctx.lineWidth="6"; ctx.lineCap="round";//向线条的每个末端添加圆形线帽 ctx.beginPath(); ctx.moveTo(0,10);//起点 ctx.lineTo(0,-r/2+10);//连接的下一个点 ctx.stroke();//绘制路径 ctx.restore();//恢复到上一次保存的画布状态 } //分针 function drawMinute(minute){ ctx.save(); var rad=2*Math.PI/60*minute; ctx.rotate(rad); ctx.lineWidth="4"; ctx.lineCap="round"; ctx.beginPath(); ctx.moveTo(0,10); ctx.lineTo(0,-r/2); ctx.stroke(); ctx.restore(); }

0赞 · 0采集
sulin 2016-11-26

save(); //保存当前环境的状态 restore(); //返回之前保存过的路径状态和属性

截图
0赞 · 0采集
Mr_Qiao 2016-10-24

秒针指向15秒的时候未计算考虑分针的位置变化

0赞 · 0采集
qq__1939 2016-10-08

优化时针指向细节

截图
0赞 · 0采集
qq__1939 2016-10-08

使用填充的方法画出秒针

截图
0赞 · 0采集
qq__1939 2016-10-08

画分针与秒针，save()：保存当前环境的状态。restore():返回之前保存过的路径状态和属性

截图
0赞 · 0采集

数据加载中...