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:畫出一條條線段來拼接成一個(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()是重新開始一段路徑，主要是為了防止之前的路徑會(huì)與之后的路徑有連線而產(chǎn)生破壞，而moveTo是在當(dāng)前的環(huán)境添加了一個(gè)點(diǎn)，然后再進(jìn)行圖像的繪制锁蠕。
//至于beginPath()是否一定要配合moveTo來使用，這個(gè)問題不是很清楚距芬，弄明白后再添上悬槽。
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線段為切線，畫出與這2條直線都相切影斑，并且半徑是radius的圓弧,即圓弧BE
//注意：arcTo的當(dāng)前路徑的最后一個(gè)點(diǎn)與圓弧的起始點(diǎn)是相連的给赞，所以繪制此矩形，不需要添加畫直線的函數(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
