畫布(canvas)是html5中新增加的乙個非常重要的元素，使用它的api，我們可以通過繪製的方式實現圖形、線條和文字的顯示。
1、目標
使用畫布元素，快速繪製乙個中小學教學使用的工具，效果如下：
2、步驟
要使用畫布實現上述的圖形效果，需要掌握畫布的下列api的使用方法：
· 直接繪製方法
· 圓形繪製方法
· 文字繪製方法
同時，還要掌握在圖形繪製時圖形和文字的顏色配製、線條閉合路徑設定和圖形的填充及描繪的過程。
3、過程
1、在頁面中新增乙個指定寬高和邊框的畫布元素，並通過id號獲取到它的上下文環境物件，儲存在變數cxt中，用於後續**的使用，**如下：
由於canvas是html5中新增元素，因此，需要考慮到它對瀏覽器的相容性，如果不相容該元素時，元素中的文字將顯示在頁面中。
下列**用於獲取元素的上下文環境物件：
在上述**中，先通過id的方式獲取到元素物件，並呼叫它的getcontext方法，然後以2d的形式來繪製畫布中的圖形效果。
2、線條的繪製
· 使用上下文環境物件中的moveto(x,y)方法，設定起始點的定位。
· 定好起始點後，再使用lineto(x,y)方法繪製到達的終站位置。
· lineto(x,y)方法可以使用多次，用於繪製多條線條的圖形。
為設定繪製線條的粗細，可以呼叫linewidth屬性，它的值的單位是畫素，另外通過strokestyle屬性設定線條的顏色，為了將繪製過程中的一些配置屬性儲存在一定範圍中，可以通過beginpath和closepath進行路徑包裹，當所有的繪製配置項完成後，就可以呼叫stroke()方法，按指定的線條進行繪製了。
3、圓形的繪製
· 與線條繪製不同，圓形的繪製更加簡單，它的api方法**如下：context.arc(x,y,r,sangle,eangle,counterclockwise);
· 各引數的功能如下表所示：
在上述**中，以閉合的路徑方式，先配置圓線條的寬度和顏色，再呼叫arc方法繪製乙個指定圓點和半徑的圖形，最後呼叫stroke()，按設定的路徑進行繪製。
4、文字的繪製
· 畫布中，文字的繪製更加簡單，只要確定文字內容、座標值就可以繪製了。
context.filltext(text,x,y,maxwidth);
· 各引數的功能如下表所示：
在上述**中，以閉合路徑的方式繪製文字，先設定文字的大小與字型，再配置字型的顏色值，完成配置後，最後呼叫filltext()方法實現文字在指定座標的繪製。
獲取元素寬高
獲取元素寬高值 1.內聯樣式.element.style讀取的只是元素內聯樣式,即寫在元素的 style 屬性上的樣式,支援讀寫.var elebox document.getelementbyid eleid var h elebox.style.height 外聯樣式 巢狀樣式無法通過上述方法直...
獲取元素高寬
element.clientwidth屬性表示元素的內部寬度，以畫素計。該屬性包括內邊距，但不包括垂直滾動條 如果有 邊框和外邊距 element.getboundingclientrect width有內邊距和邊框，無外邊距 element.style.width 只能去內聯樣式的寬window....
如何獲取元素
1 通過elementid獲取元素 引用自 autocad revit二次開發基礎教程 並通過自我編輯 已知levelid，通過id獲取元素，確認後進行其他操作 private void useelementidandgetelement document doc 2 通過element filte...