Javascript 如何在画布中的形状后面留下痕迹？

现在我有一些形状是在用户旋转鼠标滚轮时创建的，它们在一定时间后慢慢消失。我如何在跟随它的每个形状后面生成一条轨迹，并慢慢消失？代码如下：

var画布；
var语境；
var三角形=[]；
无功定时器；
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（“2d”）；
调整画布的大小（）；
addEventListener（'resize'，resizeCanvas，false）；
window.addEventListener（'orientationchange'，resizeCanvas，false）；
canvas.onwheel=函数（事件）{
handleClick（event.clientX，event.clientY）；
};
var定时器=设置间隔（resizeCanvas，30）；
}
函数三角形（x，y，三角形颜色）{
这个.x=x；
这个。y=y；
this.triangelecolor=triangelecolor；
this.vx=Math.random（）*30-15；
this.vy=Math.random（）*30-15；
这个时间=100；
}
函数handleClick（x，y）{
变量颜色=[
[0, 170, 255],
[230, 180, 125],
[50, 205, 130]
];
var triangelecolor=colors[Math.floor（Math.random（）*colors.length）]；
推（新三角形（x，y，三角形颜色））；
对于（变量i=0；icanvas.width | | t.x+t.vx<0）
t、 vx=-t.vx
如果（t.y+t.vy>canvas.height | | t.y+t.vy<0）
t、 vy=-t.vy
如果（t.time==0）{
三角形.拼接（i，1）；
}
t、 时间-=1；
t、 x+=t.vx；
t、 y+=t.vy；
}
}
函数fillBackgroundColor（）{
context.fillStyle=“黑色”；
context.fillRect（0,0，canvas.width，canvas.height）；
}
init（）

---

嗯，今天是星期天。以下是一种行之有效的方法：

向构造函数中的三角形对象属性添加空数组和不透明属性，分别调用它们，例如，

trails

和

alpha

定义轨迹中所需的重影三角形的最大数量。我发现3是一个很好的值：

    var MAX_GHOSTS = 3;

使三角形绘图函数将alpha通道值作为其第二个参数，并从函数本身中删除不透明度计算：

    function drawTriangle(triangle, alpha) { // two parameters required }

如果当前在计时器回调中绘制三角形（在循环中），则计算并更新调用

drawTriangle

时使用的三角形的alpha值。将选定三角形特性的副本推送到三角形的轨迹阵列上：复制将冻结x、y位置。不按每个计时器调用会将重影图像间隔得更远：

    if( t.time%2 == 0) {
        t.trails.push(
         { x: t.x, y: t.y, alpha: t.alpha, triangleColor: t.triangleColor}
         );
    }

此外，在计时器回调中，在现有图形循环之前，添加新的双嵌套循环结构，其中

• 外部循环检索三角形数组中每个条目的轨迹数组。如果trails数组长度大于MAX_GHOST，请删除其第一个元素（使用

  拼接

  ）

• 内部循环使用say

  j

  作为索引，从trails数组中获取下一个元素，例如调用它

  crumb

  。计算alpha值以使其快速褪色并绘制：

       drawTriangle( crumb, (j+1)/(MAX_GHOSTS + 2) * crumb.alpha);
  

---

希望你喜欢

嗯，今天是星期天。以下是一种行之有效的方法：

向构造函数中的三角形对象属性添加空数组和不透明属性，分别调用它们，例如，

trails

和

alpha

定义轨迹中所需的重影三角形的最大数量。我发现3是一个很好的值：

    var MAX_GHOSTS = 3;

使三角形绘图函数将alpha通道值作为其第二个参数，并从函数本身中删除不透明度计算：

    function drawTriangle(triangle, alpha) { // two parameters required }

如果当前在计时器回调中绘制三角形（在循环中），则计算并更新调用

drawTriangle

时使用的三角形的alpha值。将选定三角形特性的副本推送到三角形的轨迹阵列上：复制将冻结x、y位置。不按每个计时器调用会将重影图像间隔得更远：

    if( t.time%2 == 0) {
        t.trails.push(
         { x: t.x, y: t.y, alpha: t.alpha, triangleColor: t.triangleColor}
         );
    }

此外，在计时器回调中，在现有图形循环之前，添加新的双嵌套循环结构，其中

• 外部循环检索三角形数组中每个条目的轨迹数组。如果trails数组长度大于MAX_GHOST，请删除其第一个元素（使用

  拼接

  ）

• 内部循环使用say

  j

  作为索引，从trails数组中获取下一个元素，例如调用它

  crumb

  。计算alpha值以使其快速褪色并绘制：

       drawTriangle( crumb, (j+1)/(MAX_GHOSTS + 2) * crumb.alpha);
  

希望你喜欢