<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body style="margin: 0"> <canvas id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > <!-- body裏創建一個cavas畫板，直接設定他的長度寬度，樣式裏的邊框。--> </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas");/*獲取創建的canvas*/ var cxt= c.getContext("2d");/*創建一個畫筆與之關聯*/ cxt.fillStyle="rgb(0,255,0)"; /* 填充顏色 "rgb(0,0,0)"這是一種顏色的表現形式。 還有就是#ffffff 一共六 位，也是RGB，十六位進制 還有別的顏色形式 具體的參見http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS 合法顏色值*/ cxt.beginPath();/*起始一條路徑，或者重置當前路徑。*/ cxt.arc(70,30,30,0,Math.PI*2,true); /*畫圓函數，（座標X，座標Y，半徑，起始角度，結束角度，順時針或者逆時針） * http://www.w3school.com.cn/tags/canvas_arc.asp * */ cxt.closePath();/*創建從當前點回到起始點的路徑*/ cxt.fill();/*填充當前繪圖（路徑），沒有這個，繪製不出來*/ </script> </body> </html>
具體效果如下：
思路解釋如下：
在body裏創建一個canvas標籤用作畫板。
<canvas id="myCanvas" width="300" height="150" style=" border:1px solid black ;" > <!-- body裏創建一個cavas畫板，直接設定他的長度寬度，樣式裏的邊框。--> </canvas>並且在canvas標籤裏設置一些他的屬性。屬性賦值時一般都是 xx="yyy" 而屬性裏具有別的屬性還要賦值時， 格式是 xx:y (可能有特殊情況，因爲我學習的還不是很多)
接着將繪製函數寫在script標籤裏，sc標籤直接寫在body裏，也可寫在head裏。
<script type="text/javascript"> var c=document.getElementById("myCanvas");/*獲取創建的canvas*/ var cxt= c.getContext("2d");/*創建一個畫筆與之關聯*/ cxt.fillStyle="rgb(0,255,0)"; /* 填充顏色 "rgb(0,0,0)"這是一種顏色的表現形式。 還有就是#ffffff 一共六 位，也是RGB，十六位進制 還有別的顏色形式 具體的參見http://www.w3school.com.cn/cssref/css_colors_legal.asp CSS 合法顏色值*/ cxt.beginPath();/*起始一條路徑，或者重置當前路徑。*/ cxt.arc(70,30,30,0,Math.PI*2,true); /*畫圓函數，（座標X，座標Y，半徑，起始角度，結束角度，順時針或者逆時針） * http://www.w3school.com.cn/tags/canvas_arc.asp * */ cxt.closePath();/*創建從當前點回到起始點的路徑*/ cxt.fill();/*填充當前繪圖（路徑），沒有這個，繪製不出來*/ </script>cxt.beginPath(); cxt.closePath();不要這兩句也能繪製成功，可能這兩句與繪製多個對象時有關係。還沒有學習到。下來再研究。