帆布网格像系统

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

它工作得很好ctly。现在，几行我认为做这样的事情：为每一行 ，我创建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