< canvas>定義圖形 基於狀態進行繪製的
大多數 Canvas 繪圖 API 都沒有定義在 < canvas> 元素本身上,
而是定義在通過畫布的 getContext() 方法獲得的一個“繪圖環境”對象上
canvas.width canvas.height //指定canvas的寬高
canvas.getContext("2d"); //返回繪製的環境
context.moveTo(10,10) //從(10,10)開始畫
context.lineTo(100,100) //從(10,10)開始畫,畫到(100,100)
context.stroke() //開始繪製(線條)
context.lineWidth=3 //設置線條的寬度
context.strokeStyle="#f00" 設置線條的顏色 stroke筆畫的意思
context.fillStyle="rgb(255,0,0)";context.fill() //着色,,填充的顏色(顏色塊)
context.beginPath(); //定義一個新的路徑
context.closePath(); //用在路徑結束,
如果繪製的路徑不是封閉的則會自動封閉起來,不寫closrPath則不會封閉
//從座標(20,30)開始,畫一個64*36的矩形
context.fillRect(20,30,64,36); //rect矩形
//繪製弧和圓
context.arc(
centetx,centery,radius, //圓心座標及半徑
startingAngle,enddingAngle, //從哪個弧度值開始,結束於哪個弧度值
anticlockwise=false //可選,,表示以順時針開始繪製還是逆時針。
默認:順時針。。true以逆時針繪製
)
//調用arc函數
//以(300,300)爲圓心,200爲半徑畫弧,從0畫到1.5個PI
context.arc(300,300,200,0,1.5*Math.PI)
//全局變量
WINDOW_WIDTH=1024; WINDOW_HEIGHT=768;
//調用全局變量
canvas.width=WINDOW_WIDTH;
//render()函數 render(context);
renderDigit(0,0,parseInt(hours/10),ctx)