Question

我正在制作一个光模拟器，其中每个光束都是单独计算的。但是我有一个问题：

当我发出的光束的rgba颜色为0 0 0 0.01时，它会绘制黑色光束，而不是什么也不做。我想知道如何通过仅使背景更亮来绘制它。

当前，光从光源中射出，因为白光束然后击中了一个只有红色偏斜的球。然后，光束射入一个只会使蓝光偏转的球……但是，由于光束是红色的（红色和蓝色不共享rgb颜色），我将其变成了黑色。但是当光束射出时，如img中所示，它在我的白光上吸引了黑光。

我试图像这样分别绘制每个rgb：

c.beginPath();
c.arc(x, y, size, 0, 2*Math.PI);
c.fillStyle = "rgba(" + red + ", 0, 0, 0.01)";
c.fill();
c.fillStyle = "rgba(0, " + green + ", 0, 0.01)";
c.fill();
c.fillStyle = "rgba(0, 0, " + blue + ", 0.01)";
c.fill();

这是当前代码段的代码段。（而且我知道有些事情并没有达到应有的效果，但让我们关注轻型问题。）

var ctx = document.getElementById("myCanvas");
var c = ctx.getContext("2d");

c.fillRect(0, 0, 1400, 600);

var particles = [];
var blocks = [];
var enhansers = [];
for (i=0;i<360*4;i++)
{
	particles.push( new Particle(300, 300, i/4, [255, 255, 255]) );
}

blocks.push( new Block(100, 300, 60, [0, 0, 255]) );
blocks.push( new Block(500, 300, 60, [255, 255, 0]) );


setTimeout('update()', 4000);

function Block(x, y, size, rgb)
{
	this.size = size;
	this.x = x;
	this.y = y;
	this.rgb = rgb;
	c.beginPath();
	c.arc(x, y, size, 0, 2*Math.PI);
	c.setLineDash([5, 3]);
	c.strokeStyle = "green";
	c.stroke();
}
function Enhanser(x, y, size, en)
{
	this.size = size;
	this.x = x;
	this.y = y;
	this.en = en;
	c.beginPath();
	c.arc(x, y, size, 0, 2*Math.PI);
	c.setLineDash([5, 3]);
	c.strokeStyle = "orange";
	c.stroke();
}
function Particle(x, y, deg, rgb)
{
	this.angle = deg;
	this.light = 0.06;
	this.size = 4;
	this.speed = 4;
	this.delight = 1.0001;
	this.x = x;
	this.y = y;
	this.rgb = rgb;
}

function update(n)
{
	for (i=0;i<particles.length;i++)
	{
		particles[i].light /= particles[i].delight;
		particles[i].x += Math.cos( particles[i].angle ) * particles[i].speed;
		particles[i].y += Math.sin( particles[i].angle ) * particles[i].speed;
		
		c.beginPath();
		c.arc(particles[i].x, particles[i].y, particles[i].size, 0, 2*Math.PI);
		c.fillStyle =
			"rgba(" + particles[i].rgb[0]
			+ "," + particles[i].rgb[1]
			+ "," + particles[i].rgb[2]
			+ "," + particles[i].light + ")";
		c.fill();
		
		if (/*(particles[i].rgb[0] == 0 && particles[i].rgb[1] == 0 && particles[i].rgb[2] == 0) || */particles[i].light < 0.005 || particles[i].x > 1400 || particles[i].x < 0 || particles[i].y < 0 || particles[i].y > 600)
		{
			particles.splice(i, 1);
			i --;
		}
		else
		{
			for (j=0;j<blocks.length;j++)
			{
				if ( Dist(particles[i].x, particles[i].y, blocks[j].x, blocks[j].y) < particles[i].size + blocks[j].size )
				{
					particles[i].speed *= -1;
					
					particles[i].x += Math.cos( particles[i].angle ) * particles[i].speed;
					particles[i].y += Math.sin( particles[i].angle ) * particles[i].speed;
					
					if (particles[i].rgb[0] > 255 - blocks[j].rgb[0])
					{
						particles[i].rgb[0] = 255 - blocks[j].rgb[0];
					}
					if (particles[i].rgb[1] > 255 - blocks[j].rgb[1])
					{
						particles[i].rgb[1] = 255 - blocks[j].rgb[1];
					}
					if (particles[i].rgb[2] > 255 - blocks[j].rgb[2])
					{
						particles[i].rgb[2] = 255 - blocks[j].rgb[2];
					}
					break;
				}
			}
			for (j=0;j<enhansers.length;j++)
			{
				if ( Dist(particles[i].x, particles[i].y, enhansers[j].x, enhansers[j].y) < particles[i].size + enhansers[j].size )
				{
					particles[i].delight = (particles[i].delight-1)/(enhansers[j].en+1) + 1;
					
					break;
				}
			}
		}
	}
	if (particles.length > 0)
	{
		setTimeout('update()', 10);
	}
}
function Dist(x1, y1, x2, y2)
{
	return Math.sqrt( Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) );
}

<!doctype html>
<head>

<title> Light </title>

<style>



</style>
</head>
<body>


<canvas id="myCanvas" width="1400" height="600" style="border:1px solid #000000;">
</canvas>

<script type="text/javascript" src="Light.js"></script>

</body>
</html>

在javascript画布中模拟光线

0 个答案: