javascript - Canvas 随重力交替形状

Question

我有这个 Canvas 功能。任务:让形状在圆形和三 Angular 形之间交替。

我尝试更改 Draw 方法来显示下落的三 Angular 形，但我只能显示一个纯黑色三 Angular 形。但没有对它施加重力。只有一个静态三 Angular 形。但是，在编辑绘制函数之前，相同的代码给了我许多以随机速度随机掉落的圆圈。我似乎无法弄清楚为什么重力也没有应用于三 Angular 形。我觉得很奇怪，如果我在绘制方法中添加 ctx.arc ，它将显示圆圈再次下落。我不确定与三 Angular 形有什么区别。

代码笔: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();
}
}

Answer 1

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

  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 倍。