在頁面上加入canvas標籤：
<body
>
<
canvas
id="c1"
width
="600px"
height
="600px"
>
<
span
>不支援canvas瀏覽器
span
>
canvas
>
body
>
js部分：
繪製秒的刻度的思路是先用ogc.stroke()迴圈畫60個6°的扇形，將它們拼接成一整個圓，然後用ogc.fill()畫乙個實心的圓，半徑比之前拼接的那個圓短，用實心的圓擋住中間多餘的線，這樣秒的刻度就畫出來了，以此類推可以畫出分的刻度；
讓時鐘自動走起來：獲取new date()下的真實時、分、秒時間，然後用『角度*math.pi/180=弧度』的公式換算成弧度，賦值給時針、分針、秒針的圓中對應的弧度值，注意：弧度的變化是沿著順時針的方向增加的，也就是在秒針指向0秒時，它的弧度是-90°。最後設定乙個定時器，每隔1s呼叫一次封裝的函式：
Canvas繪製時鐘
首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入canvas標籤 canvas id canvas width 400 height 400 canvas 由於瀏覽器對html5...
用canvas繪製乙個簡易時鐘
在見識了html5中canvas的強大，筆者準備製作乙個簡易時鐘。下面就是成果啦，製作之前我們先分析一下，繪製乙個時鐘需要做哪些準備。一 1.首先這個時鐘分為表盤，指標 時針，分針，秒針 和數字三部分。2.表盤是個圓，這個簡單。3.繪製指標時，需要先獲取到系統時間，然後找到時間和角度的關係。4.然後...
canvas自適應圓形時鐘繪製
前面介紹過canvas粒子時鐘的繪製，本文將詳細介紹canvas自適應圓形時鐘繪製 最終自適應圓形時鐘的效果如下所示 下面來分析一下該圓形時鐘的功能 靜態背景 對於時鐘來說，背景是不變的，包括外層鐘框 內層圓點及數字 以及中心點的固定按扣 動態時鐘 時態的動態，表現在秒針 分針 時針隨著當前時間的變...