3、利用canvas元素及js指令碼繪製圓形
（1）表明開始繪製新路徑：利用上下文物件的beginpath()方法
（2）繪製圓形路徑：利用上下文物件的arc()方法，
語法是：arc(x,y,radius,startangle,endangle,anticlockwise),其中（x,y）是圓的圓心，radius是圓的半徑，startangle是起始角度，endangle是結束角度，anticlockwise表示是否按照順時針方向繪製，如果要表示360度，可以使用math.pi*2
（3）建立完成閉合路徑：利用closepath()方法
（4）設定繪製的樣式：呼叫fillstyle屬性及fill()方法進行填充，或者呼叫strokestyle及stroke()方法繪製邊框，demo及呈現效果如下：
index.html檔案中的**如下：
canvas.js檔案中的**如下：
functiondraw(id){
varcanvas=document.getelementbyid(id);
var context=canvas.getcontext('2d');
context.fillstyle='#f1f2f3';//填充顏色為黑色
context.fillrect(0,0,400,400);//繪製填充矩形
for(var i=1;i<10;i++){
context.beginpath();//每一次迴圈都重新開始繪製
context.arc(i*25,i*25,i*10,0,math.pi*2,true);
context.closepath();//每一次迴圈都要閉合路徑
context.fillstyle='rgba(255,0,0,0.25)';
context.fill();//設定填充樣式
context.strokestyle='red';
context.stroke();//設定邊框樣式
效果圖為：
注意：繪製的路徑如果不設定樣式，在畫布上是看不到的，所以最後一步必須呼叫
fill
或stroke
方法進行填充或描邊才能在畫布上顯示出來
HTML5新增畫布元素canvas
canvas元素是乙個正常的html元素，相當於在頁面插入乙個畫布。在標記中設定寬 高屬性，在調整寬 高屬性後裡面的內容不會縮放。但是在css中指定這些屬性，在縮放畫布後，裡面內容也會縮放。預設情況下畫布是透明的，除非你在畫布上繪製了內容，否則是看不到它的。如果你想我證明畫布確實存在，就能看到乙個黑...
HTML5新增的canvas元素技能之一
1 利用canvas元素建立畫布 1 建立畫布 指定canvas元素的三個屬性id width 寬度 height 高度 3 使用draw函式進行繪畫 在body元素中加入 nl ad draw canvas 屬性，呼叫指令碼檔案中的draw函式，canvas的基本語法如下 2 利用canvas元素...
HTML5新增的canvas元素技能之三
4 利用canvas元素及js指令碼繪製文字 1 設定文字的三個屬性 a 文字樣式font font weight font sizefont family 字型加粗 字型大小 字型型別 b 文字水平對齊方式textalign，屬性值有 start 預設值 end left right center...