HTML5 canvas自由繪制圖形工具,可拖拽的自由繪圖畫板。
HTML5 canvas簡介
HTML5 Canvas還有一個比較實(shí)用的應(yīng)用,那就是網(wǎng)絡(luò)畫板,這樣我們就可以在網(wǎng)頁上直接進(jìn)行畫圖操作。今天要分享的這款HTML5 Canvas畫圖工具就可以簡單實(shí)現(xiàn)網(wǎng)絡(luò)畫圖的功能,我們可以自定義筆刷的類型、粗細(xì)、顏色,也可以定義畫布的大小和背景顏色等。我們也可以對這款HTML5畫圖工具進(jìn)行擴(kuò)展,讓它的畫圖功能更加完善。
繪制復(fù)雜形狀或路徑
在簡單的矩形不能滿足需求的情況下,繪圖環(huán)境提供了如下方法來繪制復(fù)雜的形狀或路徑。
beginPath() : 開始繪制一個新路徑。
closePath() : 通過繪制一條當(dāng)前點(diǎn)到路徑起點(diǎn)的線段來閉合形狀。
fill() , stroke() : 填充形狀或繪制空心形狀。
moveTo() : 將當(dāng)前點(diǎn)移動到點(diǎn)(x,y)。
lineTo() : 從當(dāng)前點(diǎn)繪制一條直線到點(diǎn)(x,y)。
arc(x,y,r,sAngle,eAngle,counterclockwise) : 繪制一條指定半徑的弧到點(diǎn)(x,y)。
用這些方法繪制復(fù)雜形狀需遵循以下步驟
使用beginPath()方法開始繪制路徑。
使用moveTo()、lineTo()、arc()、方法創(chuàng)建線段。
使用closePath()結(jié)束繪制并閉合形狀(可選)。
使用stroke()或fill()繪制路徑的外邊框或填充形狀。使用fill()會自動閉合所有未閉合路徑。
- PC官方版
- 安卓官方手機(jī)版
- IOS官方手機(jī)版