週末之餘很是無聊，因此看看html5 canvas 以下是學習筆記，寫得比較簡單，純屬自己個人記錄。。
1：canvas arc()方法
以下是w3c上的描述:
arc() 方法使用乙個中心點和半徑，為乙個畫布的當前子路徑新增一條弧。
方法-引數:
arc(x, y, radius, startangle, endangle, counterclockwise)
引數說明:x, y
描述弧的圓形的圓心的座標。
radius
描述弧的圓形的半徑。
startangle, endangle
沿著圓指定弧的開始點和結束點的乙個角度。這個角度用弧度來衡量。
沿著 x 軸正半軸的三點鐘方向的角度為 0，角度沿著逆時針方向而增加。
counterclockwise
弧沿著圓周的逆時針方向（true）還是順時針方向（false）遍歷。
下面是我的例項。。。(歡迎拍磚)
function
drawpath(canvas_id)
varcontext
=canvas_doc.getcontext('2d
');if
(context
==null
) context.fillstyle ="
#eeeeff";
context.fillrect(0,
0,600,
700);
varendangle
=math.pi*2
;//結束角度
varanticlockwise
=true;//
是否按照順時針方向繪圖
for(
vari =0
;i<
10;i++)
}說明注意 ：
注意 context.beginpath();
context.closepath();
放得位置，放在迴圈外和迴圈內有不同的效果哦。。。
2：canvas lineto(),moveto()方法
moveto(x,y) 方法可把視窗的左上角移動到乙個指定的座標。
lineto(x,y) 方法為當前子路徑新增一條直線。
x,y座標橫縱座標
照舊例項：
function
drawmtol(canvas_id)
varcontext
=canvas_doc.getcontext('2d
');if(context
==null
)context.fillstyle ="
#eeeeff";
context.fillrect(0,
0,600,
700);
context.beginpath();
context.fillstyle ='
#64fa64';
context.strokestyle ='
#000064';
context.moveto(10,
20);
context.lineto(40,
50);
context.lineto(
100,
300);
context.lineto(10,
20);
context.closepath();
context.fill();
context.stroke();
}說明：暫無
注意：我覺得這2個方法是基礎。。任何複雜的圖形都缺其不可
比如下面這個例子
function
drawline_m(canvas_id)
varcontext
=canvas_doc.getcontext('2d
');if(context
==null
)context.fillstyle ="
#eeeeff";
context.fillrect(0,
0,600,
700);
vardx
=150
;var
dy =
150;
vars
=100
;context.beginpath();
context.fillstyle ='
#64fa64';
context.strokestyle ='
#000064';
varx
=math.sin(0);
vary
=math.cos(0);
vardig
=math.pi
/15*11;
for(
vari=0
; i
<
30; i
++) ;
context.closepath();
context.fill();
context.stroke();
}
canvas學習筆記
1 canvas 元素a 元素有乙個叫做 getcontext 的方法，這個方法是用來獲得渲染上下文和它的繪畫功能，通過簡單的測試getcontext 方法的存在，指令碼可以檢查程式設計支援性var canvas document.getelementbyid tutorial if canvas....
canvas學習筆記
canvas是html5中的新功能，它是一塊，在你開闢的空間內部用 畫圖。而建立畫布和畫圖是需要一些步驟的 canvas是布 context是各種筆 先看乙個簡單的 瀏覽器不支援canvas 每乙個我們要進行的canvas操作都必須有獲取畫布，和獲取畫布內容的操作。然後還有乙個問題就是，我們要預防老...
canvas學習筆記
畫布相當於乙個img標籤，可以在畫布上繪製內容。畫布預設是透明的，所以可以放在另乙個元素上面繪製內容，乙個頁面上可以有多個畫布元素 1.請輸入 繪製畫布的前提需要在頁面上建立乙個canvas元素，然後使用js獲取到這個canvas元素 2.繪製矩形的方法 這邊的x，y分別為矩形在畫布上的x，y位置 ...