首先第一步。
<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();
以上是利用Canvas製作時鐘的詳細內容。更多資訊請關注PHP中文網其他相關文章!