canvas学习笔记-绘制时钟
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了canvas学习笔记-绘制时钟相关的知识,希望对你有一定的参考价值。
html代码:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>canvas clock</title> <style type="text/css"> div{ text-align: center; margin-top: 150px; } </style> </head> <body> <div> <canvas id="clock" width="300" height="300"></canvas> </div> <script type="text/javascript" src="js/clock.js"></script> </body> </html>
js代码:
window.onload=function(){ var dom=document.getElementById("clock"); //获取canvas标签 var ctx=dom.getContext("2d"); //创建context 对象 var width=ctx.canvas.width; //获取画布宽度 var height=ctx.canvas.height; //获取画布高度 var r=width/2; var rem=width/200;
//绘制背景 function drawBackground(){ ctx.save(); ctx.translate(r,r); ctx.beginPath(); ctx.lineWidth=5*rem; ctx.arc(0, 0, r-5*rem/2, 0, 2*Math.PI, false); ctx.stroke(); ctx.font=18*rem+"px Arial"; ctx.textAlign="center"; ctx.textBaseline="middle"; var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2]; hourNumbers.forEach(function(number,i){ var rad=2*Math.PI/12*i; var x=Math.cos(rad)*(r-30*rem); var y=Math.sin(rad)*(r-30*rem); ctx.fillText(number, x, y); }) for(var i=0;i<60;i++){ var rad=2*Math.PI/60*i; var x=Math.cos(rad)*(r-18*rem); var y=Math.sin(rad)*(r-18*rem); ctx.beginPath(); if(i%5==0){ ctx.fillStyle="#000"; ctx.arc(x, y, 2*rem, 0, 2*Math.PI, false); }else{ ctx.fillStyle="#ccc"; ctx.arc(x, y, 2*rem, 0, 2*Math.PI, false); } ctx.fill(); } }
//绘制时针 function drawHour(hour,minute){ ctx.save(); ctx.beginPath(); ctx.fillStyle="#000"; var rad=2*Math.PI/12*hour; var mrad=2*Math.PI/12/60*minute; ctx.rotate(rad+mrad); ctx.lineWidth=3*rem; ctx.moveTo(-2*rem, 10*rem); ctx.lineTo(2*rem, 10*rem); ctx.lineTo(1*rem, 40*rem-r); ctx.lineTo(-1*rem, 40*rem-r); ctx.fill(); ctx.restore(); }
//绘制分针 function drawMinute(minute){ ctx.save(); ctx.beginPath(); ctx.fillStyle="#666"; var rad=2*Math.PI/60*minute; ctx.rotate(rad); ctx.lineCap="round"; ctx.lineWidth=3*rem; ctx.moveTo(-2*rem, 10*rem); ctx.lineTo(2*rem, 10*rem); ctx.lineTo(1*rem, 28*rem-r); ctx.lineTo(-1*rem, 28*rem-r); ctx.fill(); ctx.restore(); }
//绘制秒针 function drawSecond(second){ ctx.save(); ctx.beginPath(); ctx.fillStyle="#c14543"; var rad=2*Math.PI/60*second; ctx.rotate(rad); ctx.lineWidth=3*rem; ctx.moveTo(-2*rem, 20*rem); ctx.lineTo(2*rem, 20*rem); ctx.lineTo(1*rem, 18*rem-r); ctx.lineTo(-1*rem, 18*rem-r); ctx.fill(); ctx.restore(); }
//绘制圆心白色小点 function drawDot(){ ctx.beginPath(); ctx.fillStyle="#fff"; ctx.arc(0, 0, 3, 0, 2*Math.PI, false); ctx.fill(); }
//绘制的方法 function draw(){ ctx.clearRect(0,0,width,height); var date=new Date(); var hours=date.getHours(); var minutes=date.getMinutes(); var seconds=date.getSeconds(); drawBackground(); drawHour(hours,minutes); drawMinute(minutes); drawSecond(seconds); drawDot(); ctx.restore(); } draw();
//每个一秒调用一次绘制的方法 setInterval(draw, 1000); }
注意:
rem为缩放比例,r-5*rem/2为外层圆的半径,正弦=对边/斜边,余弦=领边/斜边,弧度等于弧长/半径,圆的弧度=2πr/r=2π=2*Math.PI
一小时的弧度=2*Math.PI/12,一分钟的弧度=2*Math.PI/60,秒钟同理
以上是关于canvas学习笔记-绘制时钟的主要内容,如果未能解决你的问题,请参考以下文章