canvas学习（八）：圆角矩形

这一篇用canvas画个圆角矩形，什么是圆角矩形呢，先上个效果图：

再来个绘制的分析图（注：鼠标所在的位置为(0,0)，r为边角圆形的半径，width为整个矩形的宽度，height为高度，以下的各个坐标为圆形的圆心坐标）：

实现代码：

window.onload=function(){
var myCanvas = document.getElementById("myCanvas");//获取canvas对象
if(myCanvas.getContext("2d")){//判断浏览器是否支持canvas标签
	//设置canvas的宽度和高度
	myCanvas.width=800;
	myCanvas.height=600;

	var context = myCanvas.getContext("2d");//获取画布context的上下文环境
	//绘制一个圆角矩形
	strokeRoundRect(context,150,50,500,500,50);
	
	//绘制并填充一个圆角矩形
	//fillRoundRect(context,150,50,500,500,50);		
}else{
	alert("您的浏览器不支持canvas，请换个浏览器试试");
}
};


/**该方法用来绘制一个有填充色的圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param fillColor:填充颜色
**/
function fillRoundRect(cxt,x,y,width,height,radius,/*optional*/fillColor){
	//圆的直径必然要小于矩形的宽高		
	if(2*radius>width || 2*radius>height){return false;}
	
	cxt.save();
	cxt.translate(x,y);
	//绘制圆角矩形的各个边
	drawRoundRectPath(cxt,width,height,radius);
	cxt.fillStyle=fillColor||"#000";//若是给定了值就用给定的值否则给予默认值
	cxt.fill();
	cxt.restore();
}


/**该方法用来绘制圆角矩形
*@param cxt:canvas的上下文环境
*@param x:左上角x轴坐标
*@param y:左上角y轴坐标
*@param width:矩形的宽度
*@param height:矩形的高度
*@param radius:圆的半径
*@param lineWidth:线条粗细
*@param strokeColor:线条颜色
**/
function strokeRoundRect(cxt,x,y,width,height,radius,/*optional*/lineWidth,/*optional*/strokeColor){
	//圆的直径必然要小于矩形的宽高		
	if(2*radius>width || 2*radius>height){return false;}
	
	cxt.save();
	cxt.translate(x,y);
	//绘制圆角矩形的各个边
	drawRoundRectPath(cxt,width,height,radius);
	cxt.lineWidth = lineWidth||2;//若是给定了值就用给定的值否则给予默认值2
	cxt.strokeStyle=strokeColor||"#000";
	cxt.stroke();
	cxt.restore();
}

function drawRoundRectPath(cxt,width,height,radius){
	cxt.beginPath(0);
	//从右下角顺时针绘制，弧度从0到1/2PI
	cxt.arc(width-radius,height-radius,radius,0,Math.PI/2);

	//矩形下边线
	cxt.lineTo(radius,height);

	//左下角圆弧，弧度从1/2PI到PI
	cxt.arc(radius,height-radius,radius,Math.PI/2,Math.PI);

	//矩形左边线
	cxt.lineTo(0,radius);

	//左上角圆弧，弧度从PI到3/2PI
	cxt.arc(radius,radius,radius,Math.PI,Math.PI*3/2);

	//上边线
	cxt.lineTo(width-radius,0);

	//右上角圆弧
	cxt.arc(width-radius,radius,radius,Math.PI*3/2,Math.PI*2);

	//右边线
	cxt.lineTo(width,height-radius);
	cxt.closePath();
}

根据这个圆角矩形再来绘制一个2048小游戏的棋盘，效果图如下：

在window.onload方法中添加如下代码：

//绘制一个2048的棋盘格
fillRoundRect(context,150,50,500,500,10,"#bbaba0");
//绘制16个小的棋盘

for(var i=0;i<4;i++){
	for(var j=0;j<4;j++){
		//170=150+20:150是棋盘左上角的x坐标，20为棋盘边线到四周各个色块的间距，也是棋盘中16个色块之间的间距
		//120=100+20:100是小色块的宽度，20为间距
		fillRoundRect(context,170+i*120,70+j*120,100,100,6,"#ccc0b3");
	}
}

 最后，感谢老师的分享！ 

评论

1 楼 xm3530 2018-03-29  

感谢，很好，很强大，谢谢分享。给节约不少时间呢！