                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /Canvas繪圖詳解

那位大神，有何好方法能使中間空白角去除，保留四邊圓角

<!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")?? //設置畫布上下文環(huán)境，必須

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){?? //將上行參數(shù)值傳遞到運行的函數(shù)后運行{}內(nèi)的語句
???? cxt.save()
???? cxt.translate(x0,y0);???? //位移
???? cxt.beginPath();
?? ? cxt.arc(width-r,height-r,r,0,Math.PI/2);//從右下角起繪右下角圓角狀態(tài)
?? ? 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;?? //設置線色狀態(tài)
?? ??? ??? ?
?? ??? ??? ?cxt.fill();??????????????? //執(zhí)行填充色，注因context己傳遞為cxt，故為cxt.fill();不是context.fill();丁
?? ??? ??? ?cxt.stroke();???????????? //執(zhí)行繪線
?}
</script>?? ?
?? ?
</body>
</html>