39,118
社区成员




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();
<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>
<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>