这一篇用canvas画个圆角矩形,什么是圆角矩形呢,先上个效果图:
再来个绘制的分析图(注:鼠标所在的位置为(0,0),r为边角圆形的半径,width为整个矩形的宽度,height为高度,以下的各个坐标为圆形的圆心坐标):
实现代码:
window.οnlοad=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"); } }
最后,感谢老师的分享!