那位大神，有何好方法能使中間空白角去除，保留四邊圓角
<!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;"><!--顯示畫布框架-->
??????? 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試
??? </canvas>
<script>
??? window.onload = function(){
???? var canvas = document.getElementById("canvas") //通過Id("canvas")與畫布連接，必須
??? ?
??????????? canvas.width = 800??????????? //畫布寬 紅邑為可修改，下同
??????????? canvas.height = 800?????????? //畫布高
???? var context = canvas.getContext("2d")?? //設(shè)置畫布上下文環(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")? //起點(diǎn)(20,20)，長寬100，半徑7，線寬10
??????????? }
?????? }
}
?function? drawRect(cxt,x0,y0,width,height,r,bordrwidth,bordrColor,fillColor){?? //將上行參數(shù)值傳遞到運(yùn)行的函數(shù)后運(yùn)行{}內(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;?? //設(shè)置線色狀態(tài)
?? ??? ??? ?
?? ??? ??? ?cxt.fill();??????????????? //執(zhí)行填充色，注因context己傳遞為cxt，故為cxt.fill();不是context.fill();丁
?? ??? ??? ?cxt.stroke();???????????? //執(zhí)行繪線
?}
</script>?? ?
?? ?
</body>
</html>
2016-12-08
你可以先把底層藍(lán)色直接fill一個(gè)大的圓角矩形， 之后再把紅色的小圓角矩形貼上去就不會(huì)出現(xiàn)那些白色東西了，反正你做2048的畫 直接控制里面的小圓角矩形就可以了
2016-12-14
是個(gè)好辦法，當(dāng)修改循環(huán)時(shí)可以改變小格數(shù)量，不用再次繪一大方復(fù)蓋，多謝