关于使用canvas绘制多个子路径之后填充的问题

[_Slience_]

代码如下

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

		context.fillStyle = "white";
		context.arc(350, 350, 150, 0, Math.PI*2, true);
		
		context.fillStyle = "white";
		context.arc(450, 450, 150, 0, Math.PI*2, false);
		
		context.fillStyle = "rgba(255,0,255,0.5)";
		context.arc(550, 350, 150, 0, Math.PI*2, true);
		context.fill();
		
		context.beginPath();

		context.strokeStyle = "red";
		context.arc(350, 350, 150, 0, Math.PI*2, true);
		
		context.strokeStyle = "blue";
		context.arc(450, 450, 150, 0, Math.PI*2, false);
		
		context.strokeStyle = "black";
		context.arc(550, 350, 150, 0, Math.PI*2, true);
		context.stroke();

实现效果

求前辈说明一下各个区域为什么填充（没有填充）颜色的原因

[neorobin]

色光三元色混合图画法

<canvas id=canv width=800 height=600></canvas>
<script>
var ctx = canv.getContext("2d");
var alpha = 1;
var cx_canv = 400;
var cy_canv = 300;
var ra = 150;
var r2 = ra/2/(Math.sin(Math.PI/3));
var cx_red = cx_canv + r2*Math.cos(Math.PI *(1/2 + 2/3));
var cy_red = cy_canv + r2*Math.sin(Math.PI *(1/2 + 2/3));
var cx_grn = cx_canv + r2*Math.cos(Math.PI *(1/2 - 2/3));
var cy_grn = cy_canv + r2*Math.sin(Math.PI *(1/2 - 2/3));
var cx_blu = cx_canv + r2*Math.cos(Math.PI *(1/2));
var cy_blu = cy_canv + r2*Math.sin(Math.PI *(1/2));

ctx.beginPath();
ctx.fillStyle = "rgba(255,0,0," + alpha + ")";
ctx.arc(cx_red, cy_red, ra, 0, Math.PI*2);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(0,255,0," + alpha + ")";
ctx.arc(cx_grn, cy_grn, ra, 0, Math.PI*2);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(0,0,255," + alpha + ")";
ctx.arc(cx_blu, cy_blu, ra, 0, Math.PI*2);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(255,255,0," + alpha + ")";
ctx.arc(cx_red, cy_red, ra, -Math.PI/3, Math.PI/3);
ctx.arc(cx_grn, cy_grn, ra, Math.PI*2/3, Math.PI*4/3);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(255,0,255," + alpha + ")";
ctx.arc(cx_red, cy_red, ra, 0, Math.PI*2/3);
ctx.arc(cx_blu, cy_blu, ra, Math.PI, Math.PI*5/3);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(0,255,255," + alpha + ")";
ctx.arc(cx_grn, cy_grn, ra, Math.PI/3, Math.PI);
ctx.arc(cx_blu, cy_blu, ra, Math.PI*4/3, Math.PI*2);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "rgba(255,255,255," + alpha + ")";
ctx.arc(cx_red, cy_red, ra, 0, Math.PI/3);
ctx.arc(cx_grn, cy_grn, ra, Math.PI*2/3, Math.PI);
ctx.arc(cx_blu, cy_blu, ra, Math.PI*4/3, Math.PI*5/3);
ctx.fill();

</script>

• 打赏
• 举报

回复 赞

[neorobin]

一个 stroke 或者 fill 方法 关闭/结束 一个 beginPath 方法开始的路径, fillStyle 或者 strokeStyle 在一次路径中, 只有最后指定的值会有效, 因为新的值会覆盖旧的值, 如果在开始新的路径(beginPath方法) 前, stroke 或者 fill 方法 有多个, 那么最后一个会把之前的绘画重新以最后指定的 fillStyle 或者 strokeStyle 再绘画一次, 从而使前面指定的颜色失效.

<canvas id=canvas width=800 height=600></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.beginPath();
context.fillStyle = "gray";
context.arc(350, 350, 150, 0, Math.PI*2);
context.fill();

context.beginPath();
context.fillStyle = "gray";
context.arc(450, 450, 150, 0, Math.PI*2);
context.fill();

context.beginPath();
context.fillStyle = "rgba(255,0,255,0.5)";
context.arc(550, 350, 150, 0, Math.PI*2);
context.fill();

context.beginPath();
context.strokeStyle = "red";
context.arc(350, 350, 150, 0, Math.PI*2);
context.stroke();

context.beginPath();
context.strokeStyle = "blue";
context.arc(450, 450, 150, 0, Math.PI*2);
context.stroke();

context.beginPath();
context.strokeStyle = "black";
context.arc(550, 350, 150, 0, Math.PI*2);
context.stroke();
</script>

• 打赏
• 举报

回复 赞