canvas学习（四）：矩形

使用canvas的基本格式前面已经说过了，这里不再累赘，直接上代码：

window.onload=function(){
	var myCanvas = document.getElementById("myCanvas");//获取canvas对象
	if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签
		var context = myCanvas.getContext("2d");//获取画布context的上下文环境

		//设置canvas的宽度和高度
		myCanvas.width=500;
		myCanvas.height=500;

		//画一个矩形
		drawRect(context,0,0,400,400,10,"#005588","yellow");
		drawRect2(context,50,50,400,400,10,"#005588","rgba(0,256,0,0.5)");//后面绘制的图形遮挡前面绘制的图形
	}else{
		alert("您的浏览器不支持canvas，请换个浏览器试试");
	}
};

/**
*该方法用来绘制一个矩形
*@param cxt:画布的上下文环境
*@param x:矩形起点x坐标
*@param y:矩形起点y坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param borderWidth:边框线粗细
*@param borderColor:边框线颜色
*@param fillColor:填充色
**/
function drawRect(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
	cxt.beginPath();
	cxt.moveTo(x,y);//左上角的第一个点坐标
	cxt.lineTo(x+width,y);//右上角的第二个点坐标
	cxt.lineTo(x+width,y+height);//右下角的第三个点坐标
	cxt.lineTo(x,y+height);//左下角的第四个点坐标
	cxt.closePath();

	cxt.lineWidth = borderWidth;//边框线粗细
	cxt.strokeStyle=borderColor;//边框线颜色
	cxt.fillStyle=fillColor;//填充色

	cxt.fill();//先填充后描边，边框粗细为10，若反过来先描边后填充则为5，因为里面的边框被填充色覆盖了。
	cxt.stroke();
}

/**
*该方法用来绘制一个矩形
*@param cxt:画布的上下文环境
*@param x:矩形起点x坐标
*@param y:矩形起点y坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param borderWidth:边框线粗细
*@param borderColor:边框线颜色
*@param fillColor:填充色
**/
function drawRect2(cxt,x,y,width,height,borderWidth,borderColor,fillColor){
	cxt.beginPath();
	cxt.rect(x,y,width,height);
	cxt.closePath();

	cxt.lineWidth = borderWidth;//边框线粗细
	cxt.strokeStyle=borderColor;//边框线颜色
	cxt.fillStyle=fillColor;//填充色

	cxt.fill();//先填充后描边，边框粗细为10，若反过来先描边后填充则为5，因为里面的边框被填充色覆盖了。
	cxt.stroke();
}

感谢老师！