HTML5---------Canvas 的学习日记2

1：绘制矩形

1:直接用strokeRect,fillRect,clearRect函数绘制

strokeStyle='pink';

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

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

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

2:画出一条条线段来拼接成一个矩形的形状

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()是重新开始一段路径，主要是为了防止之前的路径会与之后的路径有连线而产生破坏，而moveTo是在当前的环境添加了一个点，然后再进行图像的绘制。

---

//至于beginPath()是否一定要配合moveTo来使用，这个问题不是很清楚，弄明白后再添上。

3：绘制圆角矩形

1：采用arcTo函数

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的当前路径的最后一个点与圆弧的起始点是相连的，所以绘制此矩形，不需要添加画直线的函数，此函数调用后，自动产生了一条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