開發(fā)人員可以利用豐富的JavaScript方法和屬性，如fillRect繪制矩形lineTo畫直線arc繪制圓形fillText和strokeText書寫文字，以及drawImage放置圖片，來構(gòu)建各種動態(tài)可視化游戲和圖表等視覺內(nèi)容，無需依賴外部插件一個基礎示例展示了如何在400x200的畫布上繪制矩形，通過HTML元素創(chuàng)建canvas，JavaScript獲取繪圖。

要在canvas上繪制文字，可以通過2D上下文的fillText函數(shù)或strokeText函數(shù)來完成下面是一個簡單的例子var canvas = documentgetElementByIdex1var context = canvasgetContext2dcontextfont = normal 36px VerdanacontextfillStyle = #000000contextfillTextHTML5 Canvas Text， 50。

1 a 1 b contextbeginPath contextmoveTox + a， y 從橢圓的左端點開始繪制 for var i = 0 i lt 2 * MathPI i += step 參數(shù)方程為x = a * cosi， y = b * sini， 參數(shù)為i，表示度數(shù)弧度。

Canvas通過JavaScript控制畫筆，如繪制線條和路徑，線性路徑封閉路徑和填充顏色等例如，通過lineTo和fill方法實現(xiàn)基本圖形繪制圖形繪制的深入 Canvas提供了繪制弧線圓形矩形等圖形的函數(shù)，以及設置線條樣式填充樣式，如漸變和圖像文字和圖片的繪制也包含在內(nèi)，還有畫布設置如移動旋轉(zhuǎn)和透明度等。

1直接貼圖在界面上貼一個gif動態(tài)等待效果圖片gif圖片獲取方式網(wǎng)上找素材，會ps的可以自己制作2CSS3SVGHTML5Canvas手動繪制等待效果這種效果網(wǎng)上有很多類似素材，可以根據(jù)需要選擇，或使用上述技術(shù)繪制下面提供一個CSS3繪制的范例loadingwidth0height0borderright20pxsolid#fffborder。

canvasclearRect0，0，elemwidth，elemheightHTML5Canvas基本繪制線條教程HTML5Canvas基本繪制線條教程 怎么畫線條和現(xiàn)實中畫畫差不多1移動畫筆，使畫筆移動至繪畫的開始處 2確定第一筆的停止點 3規(guī)劃好之后，選擇畫筆包括畫筆的粗細和顏色等4確定繪制 因為Canvas是基于狀態(tài)的繪制很。

繪制陰影我們可以在HTML5 canvas上繪制出圖形或文字的陰影效果canvas的陰影效果非常簡單，通過一些簡單的設置，就可以自動在圖片或文字下面生成相應的陰影下面是一個簡單的例子在canvas中，圖形的陰影由2D上下文的4個屬性來控制shadowOffsetXshadowOffsetYshadowBlurshadowColorshadowOffsetX和shadowOffsetY。