Javascript 在画布上画一个好看的激光（星球大战）

我目前正在制作一些画布上的激光效果的动画，目的是让我的游戏更加有趣

为此，我需要绘制“激光”武器射击的图画和动画，类似于《星球大战》

到目前为止，我基本上只画了一条红色或蓝色的短线，然后在上面画了一条更细的白色线，所以它给人一种渐变的感觉。 我还使用linecap=“round”

我当前的代码：

function drawProjectile(weapon, ox, oy, x, y){
    var trailEnd = getPointInDirection(weapon.projSize*-2, getAngleFromTo({x: ox, y: oy}, {x: x, y: y}), x, y);

    fxCtx.lineCap = "round";

    fxCtx.beginPath(); //the background, wider beam
    fxCtx.moveTo(x+cam.o.x, y+cam.o.y);
    fxCtx.lineTo(trailEnd.x+cam.o.x, trailEnd.y+cam.o.y);
    fxCtx.closePath();
    fxCtx.strokeStyle = weapon.animColor //blue or red
    fxCtx.lineWidth = weapon.projSize;
    fxCtx.stroke();

    fxCtx.globalAlpha = 0.5; // the inner, thin, white beam
    fxCtx.strokeStyle = "white";
    fxCtx.lineWidth = 2;
    fxCtx.stroke();

    fxCtx.globalAlpha = 1;
    fxCtx.lineCap = "butt"; 
}

---

有人能建议如何改善我的激光束效果吗？

你可以为发光效果添加阴影

fxCtx.shadowBlur = 10;
fxCtx.shadowColor = '#FD0100';

但我认为这就是全部，因为你的激光太小了，以至于一个真正的梯度是没有意义的。 使用一些漂亮的颜色，比如“FEF1BA”，而不是红色激光的白色，这就是使用画布作为图像、发光等等。 下面的演示创建了屏幕外画布所需的所有图形。当激光击中地面时，背景也会被绘制出来以留下燃烧痕迹

激光

激光拍摄分为三层

ctx.drawImage

calls。前两个是通过

ctx.globalCompositeOperation=“打火机”

发光的。一个有固定的alpha，第二个有随机的alpha。最后一个是绘制的

ctx.globalCompositeOperation=“source over”

，只是一条线的图像

laaser有4个图像（画布），分别为laserRed、laserGRed、laserGreen和laserGreen。带有额外G的是激光辉光

当激光拍摄结束时，我从预渲染图像中绘制了4帧展开辉光。在4帧中的第一帧中，我在背景画布上画了一个烧痕

预渲染图像

所有使用的图形都在函数

onResize

中呈现，该函数在样板代码的resize中调用

函数

display

每帧调用一次，并处理所有动画

有一个名为imageTools的对象，它具有一些帮助函数，可以使编码更加简单

var image=imageTools.createImage（宽度、高度）

创建画布。图像附带了上下文

image.ctx

，因此您可以像绘制任何画布一样对其进行绘制。然后，您可以使用

imageTools.drawImage（图像，x，y，缩放，旋转，alpha）在全局画布上绘制该图像。

使用缩放，旋转和alpha在图像中心点绘制图像

项目符号使用一个对象池，因此GC（垃圾收集）不会产生太多干扰

我没有设置任何限制，以便那些高分辨率设备或低端机器可能会看到一些放缓。如果这是一个问题，您可以通过使项目符号数加快一点来减少项目符号数，还可以将渲染减少到两层或一层。但这比使用画布向量调用、阴影等渲染要快得多

剩下的我留给你解决。评论有点少，但我没有太多时间

底部还有一些不太可读的样板文件

左键单击开始战争。

/*************************************************************************************
*从样板代码调用，并以100ms的速度取消公告
*创建演示中使用的所有图像。
************************************************************************************/ 
var onResize=function（）{
//创建背景作为可绘制图像
background=imageTools.createImage（canvas.width、canvas.height）；
//创建平铺图像
tile=imageTools.createImage（64,64）；
tile.ctx.fillStyle=imageTools.createGradient（ctx，“线性”、0,0,64,64、[“#555”、“#666”]）；
tile.ctx.fillRect（0,0,64,64）；
tile.ctx.fillStyle=“#333”//添加颜色
tile.ctx.globalCompositeOperation=“打火机”；
瓷砖.ctx.fillRect（0,0,62,2）；
瓷砖.ctx.fillRect（0,0,2,62）；
tile.ctx.fillStyle=“#AAA”//倍增颜色以变暗
tile.ctx.globalCompositeOperation=“乘法”；
瓷砖.ctx.fillRect（62,1,2,62）；
瓷砖.ctx.fillRect（1,62,62,2）；
对于（变量y=-32；y