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

_Slience_ 2015-08-11 10:04:21
代码如下
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();

实现效果

求前辈说明一下各个区域为什么填充(没有填充)颜色的原因
...全文
93 点赞 收藏 2
写回复
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
neorobin 2015-08-11
一个 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>
回复
neorobin 2015-08-11
色光三元色混合图画法

<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>

回复
发动态
发帖子
HTML5
创建于2012-11-23

3.7w+

社区成员

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
申请成为版主
社区公告
暂无公告