那位大神，有何好方法能使中间空白角去除，保留四边圆角

源自：6-1 arc()，圆弧和圆角矩形

那位大神，有何好方法能使中间空白角去除，保留四边圆角

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <canvas id="canvas" style ="divplay:block;margin:0 auto;border:1px solid #aaa;">
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>
<script>
    window.onload = function(){

     var canvas = document.getElementById("canvas") //通过Id("canvas")与画布连接，必须

            canvas.width = 800            //画布宽红邑为可修改，下同
            canvas.height = 800           //画布高
     var context = canvas.getContext("2d")   //设置画布上下文环境，必须

for (var j = 0; j < 4; j++) {
        for (var i = 0; i < 4; i++) {
           drawRect(context,20+i*100,20+j*100,100,100,7,10,"#058","red") //起点(20,20)，长宽100，半径7，线宽10
            }
       }
}
function drawRect(cxt,x0,y0,width,height,r,bordrwidth,bordrColor,fillColor){   //将上行参数值传递到运行的函数后运行{}内的语句
     cxt.save()
     cxt.translate(x0,y0);     //位移
     cxt.beginPath();
   cxt.arc(width-r,height-r,r,0,Math.PI/2);//从右下角起绘右下角圆角状态
   cxt.lineTo(r,height);//底直线
   cxt.arc(r,height-r,r,Math.PI/2,Math.PI);//左下角
     cxt.lineTo(0,r);//左直线
     cxt.arc(r,r,r,Math.PI,Math.PI*3/2);//左上角
     cxt.lineTo(width-r,0);//顶直线
     cxt.arc(width-r,r,r,Math.PI*3/2,Math.PI*2);//右上角
     cxt.closePath();
   cxt.restore();
   cxt.lineWidth = bordrwidth;
             cxt.fillStyle =fillColor;
           cxt.strokeStyle = bordrColor;   //设置线色状态

           cxt.fill();                //执行填充色，注因context己传递为cxt，故为cxt.fill();不是context.fill();丁
           cxt.stroke();             //执行绘线
}
</script>

</body>
</html>

提问者：慕粉4042427 2016-12-08 16:57

个回答

什0么

2016-12-08 23:18:05

已采纳

你可以先把底层蓝色直接fill一个大的圆角矩形，之后再把红色的小圆角矩形贴上去就不会出现那些白色东西了，反正你做2048的画直接控制里面的小圆角矩形就可以了

0
慕粉4042427

2016-12-14 10:15:10

是个好办法，当修改循环时可以改变小格数量，不用再次绘一大方复盖，多谢

0