本篇文章的所有**** acdreamers 的《第乙個canvas例項-鐘錶
本文主要是對**中所使用的方法進行詳細說明，雖然原作者在**已經注釋得很清楚了。
一、.獲取上下文物件
var cxt = document.getelementbyid('元素名').getcontect('2d');
ie8或更早的瀏覽器不支援元素。
二、 drawclock()
drawclock()實現畫時鐘的目的。
1. clearrect() 清空給定矩形內的指定畫素。
context.clearrect(x,y,width,height);
x,y ： 要清除的矩形左上角點的(x,y)座標
width,height： 要清除的矩形寬度和高度，單位為畫素
2.new date() --- 得到系統時間
varsec = now.getseconds();
varmin = now.getminutes();
varhour = now.gethours();
3.畫時鐘的形狀
cxt.beginpath();cxt.linewidth = 10;
cxt.strokestyle = "blue"
; cxt.arc(550, 310, 300, 0, 360, false
);
cxt.closepath();
cxt.stroke();
beginpath()的作用是canvas的繪製方法，都會以上一次beginpath之後的所有路徑為基礎進行繪製。
closepath()是關閉路徑，而不是結束路徑，它會試圖從當前路徑的終點連一條路徑到七點，讓整個路徑閉合起來。
cxt.linewidth() ： 畫筆的寬度
cxt.strokestyle() : 設定或返回用於筆觸的顏色、漸變或模式。
屬性值：color 指示繪圖筆觸顏色的 css 顏色值。預設值是 #000000。
gradient 用於填充繪圖的漸變物件（線性或放射性）
pattern 用於建立 pattern 筆觸的 pattern 物件
stroke ()繪製已定義的路徑
arc() 方法建立弧/曲線（用於建立圓或部分圓）。如需通過 arc() 來建立圓，請把起始角設定為 0，結束角設定為 2*math.pi。
context.arc(x,y,r,sangle,eangle,counterclockwise);
引數描述
x圓的中心的 x 座標。
y圓的中心的 y 座標。
r圓的半徑。
sangle
起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）。
eangle
結束角，以弧度計。
counterclockwise
可選。規定應該逆時針還是順時針繪圖。false = 順時針，true = 逆時針。
4）drawscale --- 自定義函式畫刻度
Html5畫布canvas小例
小例中用到了畫布canvas的畫矩形，畫圓或弧，畫線，畫文字，顏色漸變。其全部顏色 字型 圖形都是通過js在canvas上繪製形成，總結了幾個context物件的方法如下 1.畫矩形 fillrect x,y,width,height 矩形左上角點x座標，矩形左上角點y座標,矩形寬度，矩形高度 2....
HTML5之Canvas畫正方形
1 2331 3233 3435 3637 3839 40分析說明 1 獲取canvas元素 var canvas document.getelementbyid canvas 2 取到上下文 var context canvas.getcontext 2d 3 填充繪製邊框 context.fil...
用HTML5 Canvas 實現的 時鐘
基本動畫的步驟 basic animation steps 用canvas畫一幀動畫，通常需要以下四個步驟 1.清空 canvas 除非接下來要畫的內容會完全充滿 canvas 例如背景圖 否則你需要清空所有。最簡單的做法就是用 clearrect 方法。2.儲存 canvas 狀態 如果你要改變一...