7-2的练习题

7-2的练习题，请问这么做为什么切不到右下角的扇形呢

ctx.fillRect(400,400,100,100);
ctx.clip();

ctx.arc(400,400,100,0,Math.PI*2,true);
ctx.fillStyle = "#F00";
ctx.fill();

源自：HTML5 Canvas绘图基础 7-2 编程练习

收起

2回答

怎么都被占用了呢回答被采纳获得+3积分 2018-04-11 18:38:15

var canvas=document.getElementById("canvas");

var context=canvas.getContext("2d");

context.arc(400,400,300,0,Math.PI*2,true);

context.fill();

context.clip();

context.fillStyle="orange";

context.fillRect(0,400,400,400);

context.fillStyle="pink";

context.fillRect(400,400,400,400);

context.fillStyle="lightgreen";

context.fillRect(0,0,400,400);

context.fillStyle="purple";

context.fillRect(400,0,400,400);

可以参考上边的方法，会简便些哦

怎么都被占用了呢 2018-04-11 11:01:20

矩形的坐标不对哦，如下：

提问者慕粉1257262530 #1

只能在矩形的基础上切圆形，不能在圆形的基础上切圆形吗

2018-04-11 11:19:05
提问者慕粉1257262530 #2

请问有比这个简洁的写法吗 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); //进行区域编辑 ctx.save(); ctx.arc(400,400,300,0,Math.PI*2,true); ctx.fillStyle = "#FFDAB9"; ctx.clip(); ctx.fillRect(400,400,400,400); ctx.restore(); ctx.save(); ctx.arc(400,400,300,0,Math.PI*2,true); ctx.fillStyle = "#9400D3"; ctx.clip(); ctx.fillRect(400,0,400,400); ctx.restore(); ctx.save(); ctx.arc(400,400,300,0,Math.PI*2,true); ctx.fillStyle = "#9AFF9A"; ctx.clip(); ctx.fillRect(0,0,400,400); ctx.restore(); ctx.save(); ctx.arc(400,400,300,0,Math.PI*2,true); ctx.fillStyle = "#DAA520"; ctx.clip(); ctx.fillRect(0,400,400,400); ctx.restore();

2018-04-11 11:28:49