首先第一步。
<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>
然后
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
定义一个绘制时钟的函数通过计时器每秒调用一次,默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s
drawfun(); setInterval(drawfun,1000);
函数体内容:
1).每次调用前清除一次画布,所以放在第一行。
//清除画布ctx.clearRect(0, 0, 300, 300);
2).绘制时钟的外边框和圆心,很容易就不解释了。
//时钟框和圆心 ctx.beginPath(); ctx.arc(150,150,100,0,2*Math.PI); ctx.stroke(); ctx.beginPath(); ctx.fillStyle="black"; ctx.arc(150,150,3,0,2*Math.PI); ctx.fill();
3).绘制小时和分钟的刻度。
//绘制时分刻度 for(var i=0;i<60;i++){ ctx.save(); ctx.beginPath(); //让画布以圆心为原点 ctx.translate(150,150); //每秒之间的角度 ctx.rotate(Math.PI*2/60*i); //开始绘制刻度 ctx.moveTo(0,-99); //时钟刻度 if(i%5==0){ ctx.strokeStyle = '#333'; ctx.lineWidth = 3; ctx.lineTo(0,-87); }else {//分钟刻度 ctx.strokeStyle = '#ccc'; ctx.lineWidth = 2; ctx.lineTo(0,-90); } ctx.stroke(); ctx.closePath(); ctx.restore(); }
4).绘制小时数
//绘制小时数 for(var i=0;i<60;i++){ ctx.beginPath(); //获取每秒秒钟之间的弧度算出小时数的坐标 var hudu = (2*Math.PI / 360) * 6 * i; var X = 150 + Math.sin(hudu) * 80 - 3.5; var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。 if(i%5==0){ if(i==0){ ctx.fillText("12",X-3,Y); }else{ ctx.fillText("" + i / 5 + "",X,Y); } ctx.stroke(); } }
5).最后绘制时分秒指针
var date = new Date(); var Hour = date.getHours(); //获取小时数(0-23) var Minute = date.getMinutes(); //获取分钟数(0-59) var Second = date.getSeconds(); //获取秒数(0-59) //绘制秒钟 ctx.save(); ctx.beginPath(); //修改画布原点,以圆心为原点 ctx.translate(150, 150); //指针每秒旋转度数 ctx.rotate(Math.PI * 2 / 60 * Second); ctx.strokeStyle = 'red'; ctx.lineWidth = 1; ctx.moveTo(0, 20); ctx.lineTo(0, -70); ctx.stroke(); ctx.closePath(); ctx.restore(); //绘制分钟 ctx.save(); ctx.beginPath(); ctx.translate(150, 150); //当前分钟的角度加上每秒分钟旋转的角度,如果不加分钟只会当秒钟过整分的时候才会旋转 ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second); ctx.strokeStyle = 'black'; ctx.lineWidth = 1.5; ctx.moveTo(0, 10); ctx.lineTo(0, -60); ctx.stroke(); ctx.closePath(); ctx.restore(); //绘制时钟 ctx.save(); ctx.beginPath(); ctx.translate(150, 150); //和分钟一样。 ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second); ctx.strokeStyle = 'black'; ctx.lineWidth = 2.5; ctx.moveTo(0, 8); ctx.lineTo(0, -35); ctx.stroke(); ctx.closePath(); ctx.restore();
Atas ialah kandungan terperinci 利用Canvas制作时钟. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!