Canvas 實現乙個時鐘

使用canvas實現另乙個小時鐘，效果圖如下：

前端html**：

canvas not supported

var canvas = document.getelementbyid("canvas");

var context = canvas.getcontext("2d");
var font_height = 15;// 字型大小
var margin = 35; // 邊距
var hand_truncation = canvas.width/12; // 分鐘需要減去的半徑
var hour_hand_truncation = canvas.width/10;// 小時針需要減去的半徑
var number_spacing = 20; // 數字間距
var radius = canvas.width/2 - margin; // 半徑
var hand_radius = radius + number_spacing; // 指標半徑（數字間距）
// 繪製圓
function drawcircle()
// 繪製中心點
function drawcenter()
// 繪製數字
function drawnumbers());
}// 繪製指標
function drawhand(loc, ishour , ismin)
// 繪製所有指標
function drawhands()
// 畫鍾
function drawclock()
context.font = font_height + 'px arial';
loop = setinterval(drawclock, 1000);

在刻畫指標的時候採用了這樣的處理方法：

小時取1-12 但是我們會乘以5，因為我們把乙個圓分成了60個小刻度，這樣在渲染的時候對於時、分、秒的處理就變得很容易：

時指標的偏移度數（我們取canvas下的偏轉度數）= * (2 * π) - π/2。

具體理解如下：

首先我們以canvas旋轉座標定義，順時針為+，逆時針為-，這樣我們回歸到0度數。假設現在需要渲染1:00，小時指標情況，顯然1個小時佔據圓盤的30度的夾角，我們從0開始旋轉30度角成：

但是實際上1:00的表盤時指標的顯示應該為：

用canvas繪製乙個簡易時鐘

在見識了html5中canvas的強大，筆者準備製作乙個簡易時鐘。下面就是成果啦，製作之前我們先分析一下，繪製乙個時鐘需要做哪些準備。一 1.首先這個時鐘分為表盤，指標 時針，分針，秒針 和數字三部分。2.表盤是個圓，這個簡單。3.繪製指標時，需要先獲取到系統時間，然後找到時間和角度的關係。4.然後...

canvas實現動畫時鐘

實現效果如下 1.建立canvas元素 沒有金剛鑽就不要攬瓷器活2.繪製雙圓 var drawing document.getelementbyid drawing if drawing.getcontext 3.繪製刻度 繪製刻度 context.font bold 14px arial cont...

canvas實現簡易時鐘效果

最終效果 1 設定canvas環境，這一部分比較基礎，不做詳細展開。var canvas document.getelementbyid mycanvas canvas.width document.documentelement.clientwidth 0.75 canvas.height doc...