-
小时这里需要修改 加上分钟的弧度 特别注意的是 要 /12 /60查看全部
-
中心白色圆点部分 beginPath 画线 fillStyle 颜色 arc 画圆 fill 绘画线条查看全部
-
秒钟部分 有点搞不懂那三条 lineTo 对应的是哪个方向。查看全部
-
分钟部分 同理。。。。查看全部
-
画东西之前先加一个 beginPath lineWidth 定义线的宽度 lineCap 把线条结束端 round圆 moveTo 把路径移动到指定点 不创建线条 lineTo 添加新点 在画布创建从该点到最后指定点 stroke 绘制定义路径 弧度 rad = 2 * π 除以12 * 牵引 记住画图形一定要加一组save restore 不然会影响画布。查看全部
-
画刻度 弧度red = 2*π 除以60 * 索引 x = 弧度 Math.cos(red) * 半径 没有数字那么远 (r-18) 这里需要beginPath 重新绘制路径 ctx.arc 画圆 fill 填充内容 ctx.fillStyle 设置绘画颜色 渐变查看全部
-
弧度 = 2π /12 (求出每个时钟的弧度) * 索引 x = 弧度 * 半径 Math.cos(rad) * (r - 30); y = 弧度 * 半径 Math.sin(rad) * (r - 30); fillText(输出的文本，X坐标，Y坐标，文本最大宽度（可选）) font 设置文本样式 （在填充前引用） textAlign 文本内容对齐 textBaseline 基线对齐查看全部
-
translate 重新定义圆点 beginPath 重新绘画一条路径 arc 创建弧线 （圆中心的x坐标，圆中心的Y坐标，圆半径，起始角，结束角，顺逆时钟） fill 填充内部 stroke 绘制定义的路径 lineWidth 定义线条宽度查看全部
-
弧度 = 弧长 / 半径查看全部
-
sin = bc / ac 对边比斜边 cos = ab / ac 邻边比斜边查看全部
-
方法反对法查看全部
-
方法是不是很好呢？查看全部
-
通过rem设置比例，让时钟按画布大小的比例显示查看全部
-
function draw(){ ctx.clearRect(0,0,width,height);//清除画布 ctx.save();//保存原始画布状态，即基准点位于左上角 var now=new Date(); var hour=now.getHours(); var minute=now.getMinutes(); var second=now.getSeconds(); drawbackground();//此函数中会使基准点移到画布中央 drawHour(hour,minute); drawMinute(minute); drawSecond(second); drawDot(); ctx.restore();//还原基准点到左上角 } draw(); setInterval(draw,1000);查看全部
-
//秒针 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/150
提交
取消