那位大神，有何好方法能使中间空白角去除，保留四边圆角
慕粉4042427
2016-12-08 16:57
<!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>
2回答
-
- 什0么
- 2016-12-08 23:18:05
你可以先把底层蓝色直接fill一个大的圆角矩形， 之后再把红色的小圆角矩形贴上去就不会出现那些白色东西了，反正你做2048的画 直接控制里面的小圆角矩形就可以了
-
- 慕粉4042427
- 2016-12-14 10:15:10
是个好办法，当修改循环时可以改变小格数量，不用再次绘一大方复盖，多谢
Canvas绘图详解
72885 学习 · 422 问题
相似问题