<canvas id="myCanvas"></canvas><script type="text/javascript">var canvas=document.getElementById('myCanvas');var ctx=canvas.getContext('2d');ctx.fillStyle='#FF0000';ctx.fillRect(0,0,80,100);</script>

canvas.width  canvas.height  //指定canvas的寬高canvas.getContext("2d");   //返回繪制的環(huán)境context.moveTo(10,10) //從（10，10）開(kāi)始畫(huà)context.lineTo(100,100) //從（10，10）開(kāi)始畫(huà)，畫(huà)到（100，100）context.stroke()   //開(kāi)始繪制（線(xiàn)條）context.lineWidth=3   //設(shè)置線(xiàn)條的寬度context.strokeStyle="#f00"   設(shè)置線(xiàn)條的顏色  stroke筆畫(huà)的意思context.fillStyle="rgb(255,0,0)"；context.fill()  //著色，，填充的顏色（顏色塊）context.beginPath();   //定義一個(gè)新的路徑context.closePath();   //用在路徑結(jié)束，  如果繪制的路徑不是封閉的則會(huì)自動(dòng)封閉起來(lái)，不寫(xiě)closrPath則不會(huì)封閉//從坐標(biāo)（20，30）開(kāi)始，畫(huà)一個(gè)64*36的矩形  context.fillRect(20,30,64,36);    //rect矩形//繪制弧和圓context.arc( centetx,centery,radius,  //圓心坐標(biāo)及半徑 startingAngle,enddingAngle,  //從哪個(gè)弧度值開(kāi)始，結(jié)束于哪個(gè)弧度值 anticlockwise=false   //可選，，表示以順時(shí)針開(kāi)始繪制還是逆時(shí)針。  默認(rèn):順時(shí)針。。true以逆時(shí)針繪制)//調(diào)用arc函數(shù)//以(300,300)為圓心，200為半徑畫(huà)弧,從0畫(huà)到1.5個(gè)PIcontext.arc(300,300,200,0,1.5*Math.PI)//全局變量WINDOW_WIDTH=1024;    WINDOW_HEIGHT=768;//調(diào)用全局變量canvas.width=WINDOW_WIDTH;//render()函數(shù)  render(context);renderDigit(0,0,parseInt(hours/10),ctx)