canvas自適應圓形時鐘繪製

前面介紹過canvas粒子時鐘的繪製，本文將詳細介紹canvas自適應圓形時鐘繪製

最終自適應圓形時鐘的效果如下所示

下面來分析一下該圓形時鐘的功能

靜態背景

對於時鐘來說，背景是不變的，包括外層鐘框、內層圓點及數字、以及中心點的固定按扣

動態時鐘

時態的動態，表現在秒針、分針、時針隨著當前時間的變化的變化。開啟乙個每秒變化1次定時器，秒針與當前的時間的秒數保持一致，分針的變化與當前的秒數和分鐘數都有關，時針的變化與當前的分鐘數和小時數都有關

自適應要做到時鐘自適應，需要將時鐘內部的尺寸繪製與時鐘整體的寬高相關聯，而不能設定為固定值

下面是一張時鐘的簡易分析圖

下面來實現靜態的時鐘背景，包括外層鐘框、內層圓點及數字、以及中心點的固定按扣，以時鐘尺寸為200*200為基準，則半徑為100，通過translate()將圓心點調整為(0,0)點

【初始設定】

由於外面經常要用到r和cxt.linewidth，所以將其儲存為變數

var cxt = drawing.getcontext('2d');

var w = drawing.width = 400;
var h = drawing.height = 400;
var r = w / 2;
var cw = cxt.linewidth = 0.1*r;

為了將外層鐘框不超出canvas區域，則其半徑設定為r-cw/2，線條寬度與半徑成比例

cxt.translate(r,r);

cxt.beginpath();
cxt.arc(0,0,r-cw/2,0,2*math.pi,false);
cxt.stroke();

在距離圓心點0.8r-cw/2處，繪製12個數字，表示當前的分鐘數，數字的字型大小與半徑成比例

cxt.beginpath();   

cxt.font = 0.2 * r + 'px 宋體';
cxt.textalign = 'center';
cxt.textbaseline = 'middle';  
var r1 = 0.8*r  - cw/2;   
for(var i = 12; i > 0; i--)

在距離圓心點0.9r-cw/2處，繪製60個圓點，表示當前的秒數，當前秒數與分鐘數處於同一角度時，表示為大圓點(半徑為cx/5)，否則為小圓點(半徑為cx/8)

cxt.beginpath();

var r2 = 0.9*r - cw/2;
for(var i = 0; i < 60; i++)else
cxt.fill();
}

cxt.beginpath();

cxt.arc(0,0,cw/3,0,2*math.pi,false);
cxt.fill();

<

canvas 
id="drawing"
style
="border:1px solid black"
>
canvas
>
<
script
>
vardrawing 
=document.getelementbyid(
'drawing');
if(drawing.getcontext)
cxt.beginpath();
varr2 
=0.9*r 
-cw/2;
for(
vari =0
; i 
<
60; i++)
else
cxt.fill();
}cxt.beginpath();
cxt.arc(0,
0,cw
/3,0,2*math.pi,false);
cxt.fill();
}function
draw()
draw();
}script
>

下面來分為時針、分針、秒針來進行動態效果

【秒針】

開啟乙個每秒變化1次定時器，秒針與當前的時間的秒數保持一致　　

function

drawsecond(second)

分針的變化與當前的秒數和分鐘數都有關

function

drawminute(minute,second)

時針的變化與當前的分鐘數和小時數都有關

function

drawhour(hour,minute)    

因此，需要將中心按扣的**從靜態背景函式drawstatics()中分離出來，並重新安排**順序

由於瀏覽器的定時器存在誤差，因此設定為1000ms並不合適，由於系統卡頓等原因，可能會跳過某次效果，因此，設定為500ms

最終完整**如下所示

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
head
>
<
body
>
<
canvas 
id="drawing"
>
canvas
>
<
script
>
vardrawing 
=document.getelementbyid(
'drawing');
if(drawing.getcontext)
cxt.beginpath();
varr2 
=0.9*r 
-cw/2;
for(
vari =0
; i 
<
60; i++)
else
cxt.fill();
}cxt.restore();
}function
drawdot()
function
drawsecond(second)
function
drawminute(minute,second)
function
drawhour(hour,minute)    
function
draw()
draw();
setinterval(draw,
500);
}script
>
body
>
html
>

Canvas繪製時鐘

首先，找一張時鐘的，就是下面這張了。來自bigger than bigger的dribbble 侵刪 然後就開始用canvas實現這個逼格滿滿的時鐘吧。在html 中插入canvas標籤 canvas id canvas width 400 height 400 canvas 由於瀏覽器對html5...

canvas 繪製矩形和圓形

canvas繪製有兩神方法 1 填充 fill 填充是將圖形內部填滿.2 繪製邊框 stroke 繪製邊框是不把圖形內部填滿，只是繪製圖形的外框.當我們在繪製圖形的時候，首先要設定好繪製的樣式，然後我們就可以呼叫有關的方法進行繪製 fillstyle屬性 填充的樣式，在這個屬性裡面設定填入的填充顏色...

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如 arc x,y,radius,startangle,endangle,countercl...