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

2015-08-11 10:04:21 337 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

canvas(填充描边，绘制矩形、路径、文本、图像，变换，阴影，渐变等) 这里的缩放只影响绘制的图像，不影响上下文的变换矩阵。然后再把原来的值修改为这个平均值，实际上相当于过滤掉了颜色信息，只留下类似亮度的灰度信息。对绘制上下文应用变换，可以导致以不同的变换矩阵应用绘制操作，从而产生不同的结果。接收不同类型和不同数量参数的方法，会通过方法名的后缀体现这些信息。中的方法有同样的参数，只不过最后一个参数必须是定型数组。第二个参数表示缓冲区的起始偏移量，最后一个参数是要读取的顶点数量。而在绘制内圆之前，必须先把路径移动到内圆上的一点，以避免绘制出多余的线条。阅读详情

代码如下

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 详解 —— 绘制篇 canvas 详解 —— 绘制篇阅读详情

_Slience_

HTML5 43,737 成员 5,570 内容

+ 关注 + 加入社区

切换为时间正序

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>

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

相关推荐