canvas基礎繪製之時鐘

04-04

canvas是一個比較費時間的東西，我學的也不多，以後我會專門寫一篇文章講canvas，這篇文章就是講解本文中的代碼一些相關知識。

一、寫在HTML裡面的canvas

簡單來說canvas在HTML標籤裡面就三行，如：

<canvas id="clock" width_="500" height="500" > //第一行標註出這個是個canvas

您的瀏覽器不支持canvas標籤，無法看到時鐘 //如果瀏覽器不支持，會顯示出

</canvas> //結束

二、寫在Javascript裡面的canvas

具體內容寫在javascript裡面，簡單說就是用javascript畫出相關的內容，不難但很繁瑣。

1.起始內容

javascript裡面起始兩句，必須得寫的兩句

var clock=document.getElementById(clock); //得到canvas的ID

var context=clock.getContext(2d); //賦值一個變數，後面就是這個變數

2.大的框架

接下來大的結構就是這種，創建一個構造函數，所有內容寫進去，然後drawClock()執行這個構造函數，最後定時器，每秒執行一次。

function drawClock() {}

drawClock();

setInterval(drawClock,1000);

3.內部細節

1)關於計算時間的坑

hour = hour + minute / 60;

hour = hour > 12 ? hour - 12 : hour; //因為按照24小時計算的

context.rotate(i * 30 * Math.PI / 180);

之所以把這三行代碼放到一起，是因為都是描寫hour的

rotate代表旋轉角度。如需將角度轉換為弧度，請使用 degrees*Math.PI/180 公式進行計算。

2) canvas 基本的介紹

context.beginPath(); context.closePath(); 開始/結束一條路徑

lineWidth 線條寬度

stroke() 繪製路徑，只有有這個才能顯示出路徑

translate(x,y); 重新映射畫布（0，0）位置

<!doctype html> <html><head> <style> #clock{ display:block; margin: 0 auto; } </style></head><body><canvas id="clock" width_="500" height="500" > 您的瀏覽器不支持canvas標籤，無法看到時鐘</canvas><script> var clock=document.getElementById(clock); var context=clock.getContext(2d); function drawClock() { context.clearRect(0, 0, 500, 500); function tow(n) { return n >= 0 && n < 10 ? 0 + n : + n; } var now = new Date(); var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours(); var date = now.getDate(); var month = now.getMonth()+1; var year = now.getFullYear(); hour = hour + minute / 60; var hour1=hour; hour = hour > 12 ? hour - 12 : hour; context.beginPath(); context.lineWidth = 10; context.arc(250, 270, 200, 0, 360, false); context.closePath(); context.stroke(); for (i = 0; i < 12; i++) { context.save(); context.lineWidth = 7; context.strokeStyle = "red"; context.translate(250, 270); context.rotate(i * 30 * Math.PI / 180); context.beginPath(); context.moveTo(0, -170); context.lineTo(0, -190); context.closePath(); context.stroke(); context.restore(); } for ( i = 0; i < 60; i++) { context.save(); context.lineWidth = 5; context.strokeStyle = "blue"; context.translate(250, 270); context.rotate(i * 6 * Math.PI / 180); context.beginPath(); context.moveTo(0, -180); context.lineTo(0, -190); context.closePath(); context.stroke(); context.restore(); } for (var i = 1; i < 13; i++) { context.save(); var deg = i * Math.PI / 6; context.translate(250, 270); var x = Math.sin(deg); var y = -Math.cos(deg); context.fillStyle = "block"; context.font = "25px 宋體"; context.textAlign = "center"; context.textBaseline = "middle"; context.beginPath(); context.fillText(i, x * 155, y * 155); context.closePath(); context.restore(); } context.save(); context.lineWidth=7; context.strokeStyle="#000"; context.translate(250,270); context.rotate(hour*30*Math.PI/180); context.beginPath(); context.moveTo(0,-110); context.lineTo(0,10); context.closePath(); context.stroke(); context.restore(); context.save(); context.lineWidth=5; context.strokeStyle="#000"; context.translate(250,270); context.rotate(minute*6*Math.PI/180); context.beginPath(); context.moveTo(0,-135); context.lineTo(0,15); context.closePath(); context.stroke(); context.restore(); context.save(); context.strokeStyle="red"; context.lineWidth=3; context.translate(250,270); context.rotate(second*6*Math.PI/180); context.beginPath(); context.moveTo(0,-170); context.lineTo(0,20); context.closePath(); context.stroke(); context.beginPath(); context.arc(0,0,5,0,360,false); context.closePath(); context.fillStyle="gray"; context.fill(); context.stroke(); context.beginPath(); context.arc(0,-150,5,0,360,false); context.closePath(); context.fillStyle="gray"; context.fill(); context.stroke(); context.restore(); context.save(); context.font="23px 楷體"; context.lineWidth=1; context.strokeStyle="green"; context.strokeText("現在是大連時間:"+tow(year)+"年"+tow(month)+"月"+tow(date)+"日 " +tow(Math.floor(hour1))+"時"+tow(minute)+"分"+tow(second)+"秒",5,30); context.restore(); } drawClock(); setInterval(drawClock,1000);</script></body></html>