html5繪圖標(biāo)簽,詳解HTML5 Canvas標(biāo)簽及基本使用

1、html5繪圖標(biāo)簽,詳解html5 canvas標(biāo)簽及基本使用html 5 標(biāo)簽定義和使用標(biāo)簽定義圖形，比表和其他圖像。標(biāo)簽只是圖形容器，您必需用法腳原來繪制圖形。實(shí)例如何通過 canvas 元素來顯示一個(gè)紅色的矩形：var canvas=document.getelementbyid（&39;mycanvas&39;）;var ctx=canvas.getcontext（&39;2d&39;）;ctx.fillstyle=&39;ff0000&39;ctx.fillrect（0,0,80,100）;定義圖形 基于狀態(tài)舉行繪制的大多數(shù) canva

2、s 繪圖 api 都沒有定義在 元素本身上，而是定義在通過畫布的 getcontext（） 辦法獲得的一個(gè)繪圖環(huán)境對(duì)象上canvas.width canvas.height /指定canvas的寬高canvas.getcontext（"2d"）; /返回繪制的環(huán)境context.moveto（10,10） /從（10，10）開頭畫context.lineto（100,100） /從（10，10）開頭畫，畫到（100，100）context.stroke（） /開頭繪制（線條）context.linewidth=3 /設(shè)置線條的寬度context.stroke

3、style="f00" 設(shè)置線條的色彩 stroke筆畫的意思context.fillstyle="rgb（255,0,0）"；context.fill（） /著色，填充的色彩（色彩塊）context.beginpath（）; /定義一個(gè)新的路徑context.closepath（）; /用在路徑結(jié)束，假如繪制的路徑不是封閉的則會(huì)自動(dòng)封閉起來，不寫closrpath則不會(huì)封閉/從坐標(biāo)（20，30）開頭，畫一個(gè)64*36的矩形context.fillrect（20,30,64,36）; /rect矩形/繪制弧和圓contex

4、t.arc（centetx,centery,radius, /圓心坐標(biāo)及半徑startingangle,enddingangle, /從哪個(gè)弧度值開頭，結(jié)束于哪個(gè)弧度值anticlockwise=false /可選，表示以順時(shí)針開頭繪制還是逆時(shí)針。默認(rèn)：順時(shí)針true以逆時(shí)針繪制）/調(diào)用arc函數(shù)/以（300,300）為圓心，200為半徑畫弧，從0畫到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