javascript - Canvas 在重力的作用下交替变化

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

我尝试仅更改Draw方法以显示落下的三角形，但只能显示纯黑色三角形。但是没有重力作用。只有一个静态三角形。但是，在编辑绘图功能之前，相同的代码使我有许多圆圈以随机且随机的速度下落。我似乎无法弄清楚为什么也没有将重力应用于三角形。我感到很奇怪，如果在draw方法中添加ctx.arc，它将显示再次掉落的圆圈。我不确定三角形有什么区别。

Codepen：https://codepen.io/stefanomartinengo/pen/XVqapL

编码：

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();

我试过的

 class Circle extends Shape
{
   constructor(x,y,color,alpha,gravity,radius)
{
    super("circle",x,y,color,alpha,gravity);
    this._radius = radius;
}
 DrawT() {
  ctx.beginPath();
  ctx.moveTo(75, 50);
  ctx.lineTo(100, 75);
  ctx.lineTo(100, 25);
  ctx.fill();
}
}

最佳答案

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

  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);
  }

您的代码样式中也有许多问题会影响整体性能。没有适当的测试，感觉就像它慢了十倍。

关于javascript - Canvas 在重力的作用下交替变化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48242330/