HTML5 Canvas繪製簡單形狀

2021-09-08 04:08:22 字數 2438 閱讀 3027

使用canvas來進行繪畫,它像很多其他dom物件一樣,有很多屬性和方法,操作這些方法,實現繪畫

獲取canvas物件,呼叫document.getelementbyid()方法

呼叫canvas物件的getcontext()方法,獲取context物件,引數:string的」2d」

繪製線段

呼叫context物件的moveto()方法,把起點位置定義好,引數:x,y

呼叫context物件的lineto()方法,把終點位置定義好,引數:x,y

呼叫context物件的stroke()方法,畫一條線

如果不呼叫moveto()方法,起點的位置是上次的點

繪製矩形

呼叫context物件的fillrect()方法,填充矩形,引數:起點橫座標,起點縱座標,寬度,高度

呼叫context物件strokerect()方法,邊框矩形,引數:起點橫座標,起點縱座標,寬度,高度

例如:context.fillrect(0,0,100,100); 會畫出乙個黑色的矩形

注意:html5 canvas fillrect座標和大小一直不對,是因為canvas的寬度和高度必須內聯在canvas標籤中才對

繪製扇形

呼叫context物件的beginpath()方法,開啟路徑

呼叫context物件的moveto()方法,把路徑移動到圓心位置,引數:x,y

呼叫context物件的arc()方法,繪製圓弧,引數:圓心x座標,圓心y座標,開始角度,結束角度

呼叫context物件的closepath()方法,關閉路徑

呼叫context物件的fill()方法,填充顏色

繪製貝塞爾曲線

呼叫context物件的beziercurveto()方法,繪製曲線路徑,

引數:第一控制點x,第一控制點y,

第二控制點x,第二控制點y,

最終控制點x,最終控制點y

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>測試canvas

title

>

head

>

<

body

>

<

canvas

id="mycanvas"

width

="500px"

height

="1000px"

>

canvas

>

<

script

>

varcanvas

=document.getelementbyid(

'mycanvas');

varcontext

=canvas.getcontext("2d

");//繪製矩形

context.fillrect(0,

0,100,

100);

context.strokerect(

120,0,

100,

100);

//繪製扇形

context.beginpath();

context.moveto(50,

220);

context.arc(50,

220,50,

0,math.pi

/4);

context.closepath();

context.fill();

//繪製線段

context.moveto(0,

300);

context.lineto(

100,

300);

context.lineto(

100,

400);

context.stroke();

//繪製貝塞爾曲線

HTML5 Canvas繪製簡單形狀

使用canvas來進行繪畫,它像很多其他dom物件一樣,有很多屬性和方法,操作這些方法,實現繪畫 獲取canvas物件,呼叫document.getelementbyid 方法 呼叫canvas物件的getcontext 方法,獲取context物件,引數 string的 2d 繪製線段 呼叫con...

HTML5 canvas 繪製圓形

canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...

html5 Canvas繪製線條

function draw cxi.beginpath 初始化路徑繪製 cxi.moveto 75,50 將路徑的 起始點 座標確定 cxi.lineto 100,85 將另乙個 結點 座標確定 cxi.lineto 100,20 將另二個 結點 座標確定 這裡的結點可以理解成photoshop裡面...