HTML5---------Canvas 的學(xué)習(xí)日記2

1：繪制矩形

1:直接用strokeRect,fillRect,clearRect函數(shù)繪制

strokeStyle='pink';

context.strokeRect(x,y,width,height);

context.fillRect(x,y,width,height);

context.clearRect(x,y,width,height);

2:畫(huà)出一條條線段來(lái)拼接成一個(gè)矩形的形狀

function drawRect(x,y,width,height){

context.beginPath();

context.moveTo(x,y);

context.lineTo(x+width,y);

context.lineTo(x+width,y+height);

context.lineTo(x,y+height);

context.closePath(）；

}

注意：beginPath()是重新開(kāi)始一段路徑，主要是為了防止之前的路徑會(huì)與之后的路徑有連線而產(chǎn)生破壞，而moveTo是在當(dāng)前的環(huán)境添加了一個(gè)點(diǎn)，然后再進(jìn)行圖像的繪制。

//至于beginPath()是否一定要配合moveTo來(lái)使用，這個(gè)問(wèn)題不是很清楚，弄明白后再添上。

3：繪制圓角矩形

1：采用arcTo函數(shù)

function drawroundRec(x,y,width,height,radius){

context.beginPath();

context.moveTo(x+radius,y);

arcTo(x+width,y,x+width,y+height,radius);//即以AC線段和CD線段為切線，畫(huà)出與這2條直線都相切，并且半徑是radius的圓弧,即圓弧BE

//注意：arcTo的當(dāng)前路徑的最后一個(gè)點(diǎn)與圓弧的起始點(diǎn)是相連的，所以繪制此矩形，不需要添加畫(huà)直線的函數(shù)，此函數(shù)調(diào)用后，自動(dòng)產(chǎn)生了一條AB的直線

arcTo(x+width,y+height,x,y+height,radius);

arcTo(x,y+height,x,y,radius);

arcTo(x,y,x+radius,y,radius);

context.stroke