繪製矩形
· 指定正方形的邊長
· 指定正方形的位置點¯x和
ÿ · 設定正方形的屬性
· 繪製正方形
//畫正方形
function
drawsquare
(canvas,context)
繪製線
· beginpath
方法方法告
訴畫布開始乙個新路徑 ·
的moveto
方法把畫筆移到畫布上的指定點 ·
了lineto
方法描繪
路徑，從畫筆的當前位置描
繪到畫布上的另乙個點 ·
呼叫closepath
方法將路徑的起始點
連線到當前路徑的最後乙個點
//繪製線
形· 建立乙個路徑
· 填充弧方法引數 ·
設定圓的屬性
· 填充圓
先來分析弧方法
context
.arc(x,
y,radius
,startangle
,endangle
.direction); ·
點¯x和y
：確定圓
心在畫布上的位置 ·
半徑：圓
的半徑 · 由
startangle：圓
弧的起始角，確定路徑的起點，可以
為負值（表示按
負方向度量），單位
為弧度 ·
endangle：圓
弧的終止角，確定路徑的
終點，可以
為負值（表示按
負方向度量），單位
為弧度 ·
方向：真表示逆
時針畫弧，虛假表示
順時針畫弧
//畫圓形
function
drawcircle
(canvas,context)
//度數轉弧度
HTML5之帆布（canvas）（二）
乙個頁 面可以有多個 畫布，但是要 為每個畫布指定唯一的id 預設情況下，畫布是透明的 在畫布上繪圖 接下來我們開始在畫布上繪製乙個矩形。要畫這個矩形，首先要確定矩形的位置，其次是矩形的大小。這裡把矩形畫在x 10畫素，y 10畫素的位置，讓它的高度和寬度都等於100畫素。1.首先 獲得畫布元素的引...
html5學習筆記之四（canvas物件）
1.例子 2.填充矩形區域 context.fillrect x,y,w,h 填充矩形區域，設定引數 context.strokerect x,y,w,h 矩形區域邊界繪製 context.clearrect x,y,w,h 橡皮擦，將矩形區域內內容擦除 3.顏色指定方式 紅色為例 ff0000 f...
HTML5之Canvas畫圓形
html5之canvas畫圓形 1 設計原始碼 2 設計結果 3 分析說明 1 建立路徑 context.beginpath 2 建立圓形路徑 context.arc 600,300,200,0,math.pi 2,true 第乙個引數x 起點橫座標 第二個引數y 起點縱座標 第三個引數radius...