Javascript 帆布与重力交替的形状

我有这个画布功能。任务：使形状在圆形和三角形之间交替

我试着改变画法来显示下降的三角形，但我只能得到一个普通的黑色三角形来显示。但是没有重力作用于它。只有一个静态三角形。但同样的代码，在我编辑draw函数之前，给出了许多以随机速度下落的圆圈。我似乎不明白为什么重力没有被应用到三角形上。我觉得很奇怪，如果我在draw方法中添加一个ctx.arc，它将再次显示下降的圆圈。我不确定三角形有什么区别

代码笔：

守则：

var canvas, ctx;
class SuralinkApplicationFX
{    
constructor()
{
    this._frame = 0;
    this._canvasInitted = false;
    this._shapes = [];
    this.InitCanvas();
    this.Render();
}

InitCanvas()
{
    this._canvasInitted = true;
    canvas = document.getElementById('theCanvas'),
    ctx = canvas.getContext('2d');
    canvas.setAttribute('width', window.innerWidth);

    this.DropShapes();

    window.requestAnimationFrame(() => this.Render());
}

DropShapes()
{
    if(this._shapes.length <= 0) window.requestAnimationFrame(() => 
this.Render());

    var howManyToDrop = getRandomInt(1,12);

    for(var xIt=1; xIt<=howManyToDrop; xIt++)
    {
        var shape = new Circle(
             getRandomInt(0,parseInt(canvas.getAttribute('width'))),
             0,randomColors(),
             randomNumFrom(0.15,0.65),randomNumFrom(0.05,1.45),
             randomNumFrom(2,20));
        this._shapes.push(shape);

    }

    setTimeout(() => this.DropShapes(),getRandomInt(350,950));
}

Render()
{

    if(this._canvasInitted == true)
    {

        this._frame++;
        this._can_w = parseInt(canvas.getAttribute('width')),
        this._can_h = parseInt(canvas.getAttribute('height')),

        ctx.clearRect(0, 0, this._can_w, this._can_h);

        this.UpdateShapes();
        this.DrawShapes();
    }

    if(this._shapes.length > 0) window.requestAnimationFrame(() => 
this.Render());
}

DrawShapes()
{
    this._shapes.forEach(function(shape){
  shape.Draw();
    },this);
}

UpdateShapes()
{
    this._shapes.forEach(function(shape,idx){
        shape.ApplyGravity();
    },this);
}
}

class Shape
{
constructor(type,x,y,color,alpha,gravity)
{
    this._type = type;
    this._x = x;
    this._y = y;
    this._color = color;
this._gravity = gravity;
    this._alpha = alpha;
}

get type() { return this._type; }
get x() { return this._x; }
get y() { return this._y; }

ApplyGravity()
{
    this._y += this._gravity;
}

Draw() { 
}
}

class Circle extends Shape
{
constructor(x,y,color,alpha,gravity,radius)
{
    super("circle",x,y,color,alpha,gravity);
    this._radius = radius;      
 }

 Draw()
 {
  ctx.fillStyle = 'rgba('+this._color+','+this._alpha+')';
        ctx.beginPath();
        ctx.arc(this.x, this.y, this._radius, 0, Math.PI*2, true);
        ctx.closePath();
        ctx.fill();
}
}

function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomNumFrom(min, max)
{
return Math.random()*(max - min) + min;
}

function randomColors() {
return 

`${Math.round(randomNumFrom(0,255))},
 ${Math.round(randomNumFrom(0,255))},
 ${Math.round(randomNumFrom(0,255))}`
 }

var suralinkAppFx = new SuralinkApplicationFX();

---

您没有使用“形状”位置。简单修复如下

  DrawT() {
    // set position via transform
    ctx.setTransform(1,0,0,1,this._x,this._y);
    ctx.beginPath();
    ctx.moveTo(-12, 0);
    ctx.lineTo(13, 25);
    ctx.lineTo(13, -25);
    ctx.fill();
    // reset the transform (or better yet after all drawn)
    ctx.setTransform(1,0,0,1,0,0);
  }

---

在影响总体性能的代码样式中也存在许多问题。如果没有适当的测试，它感觉速度太慢了10倍。

您介意将提供的源代码转换成一个工作片段或一个文件吗？谢谢。这是：codepen.io/stefanomartinengo/pen/XVqapL@newtojst，这很有效！然而，我不确定我是否理解setTransforms的情况。我的下一步是随机排列下来的三角形的形状。您能解释一下setTransform相对于moveTo、lineTo和其他lineTo所做的工作吗@Blindman67@GaelicLaic集合变换是复杂的，在评论中没有充分解释的余地。可能会有一点帮助，但就个人而言，这是关于一个明确的泥浆。快速版本

setTransform（a，b，c，d，e，f）

a，b是像素顶部（1,0）的方向和大小，c，d是像素左侧（0,1）的方向和大小。e、 f是原点（0,0）的像素位置。谢谢！非常有用。所以我试着在三角形不同点的x，y上放置一种方法，它使随机大小在下降时不断变化，而不是在创建时只改变一次。在哪个点渲染形状。我正试图找出在何处设置新的大小，而不必每隔毫秒或以何种频率重新渲染一个新的随机数盖尔族人8分钟前@Blindman67

  DrawT() {
    // set position via transform
    ctx.setTransform(1,0,0,1,this._x,this._y);
    ctx.beginPath();
    ctx.moveTo(-12, 0);
    ctx.lineTo(13, 25);
    ctx.lineTo(13, -25);
    ctx.fill();
    // reset the transform (or better yet after all drawn)
    ctx.setTransform(1,0,0,1,0,0);
  }