Question

我目前正试图通过使用Javascript（画布）制作动画来改进我的逻辑。

我想重现这个动画：http://codepen.io/interaminense/pen/QKxrpE

一开始，我不希望列上下起伏。我只想放置所有线条并让它们旋转。

我写了这段代码：

构造函数

 function Particle(i, j){
   this.y = 15 * i * 2;
   this.x = 15 * j;
   particleIndex++;
   particles[particleIndex] = this;
   this.id = particleIndex;
   this.color = "#000000";            
}

然后，放置以下行：

Particle.prototype.draw = function(){
   ctx.fillStyle = this.color;
   ctx.fillRect(this.x, this.y, 1, 15); 
}

我试图只放一行：

  var test = new Particle();
  test.draw();

完美无缺。现在，对于几行我想做这样的事情：对于每一行，我创建X行：

for(var i=0; i<4; i++){ 
  for(var j=0; j<15; j++){
    // First row, i create 15 lines. Second row, I create 15 lines...
    new Particle(i, j); // i and j for determinate the row and columns
  }
}

然后，我放线：

for( var i in particles){
   particles[i].draw();
}

这是一个jsfiddle：https://jsfiddle.net/65pgy0gc/2/

现在，对于旋转，我认为最困难的事情是将物体从其自身中心旋转。我骑马我必须翻译才能更改变换原点，应用旋转并翻译回来。像这样的东西？：

Particle.prototype.draw = function(){
       ctx.fillStyle = this.color;

       ctx.translate(this.x,this.y);
       ctx.rotate((Math.PI/180)*angle);
       ctx.translate(-this.x,-this.y);

       ctx.fillRect(this.x, this.y, 1, 15); 
    }

Answer 1

试图扭转变换是很麻烦的方法。

围绕中心旋转

// x,y center of rect
// w,h width and height
// rot in radians
function draw(x,y,w,h,rot){
    ctx.setTransform(1,0,0,1,x,y);  // if you want a scale replace the two 1s with scale
    ctx.rotate(rot);
    ctx.fillRect(-w/2,-h/2,w,h);
    // next line is optional 
    ctx.setTransform(1,0,0,1,0,0);  // will reset the transform or if you
                                    // are calling this function many times in a row
                                    // can be done after all the particles have been drawn

 }

有关轮播Rotate individual objects in canvas?
和一些通用sprite renders that may be useful

像系统

1 个答案: