Rev. 2.73

guryjs.png

Gury는 Canvas 요소를 이용하여 간단하게 개체를 렌더링하거나 애니메이션을 추가하고, 게임과 같은 인터랙션 컨텐츠를 손쉽게 구현할 수 있도록 도와주는 jQuery용 플러그인입니다. 사용 방법은 다음과 같습니다.

// Create and style a new canvas using gury
$g().size(256, 256).background("#363").add({

  // Hold some object information
  size: 128, theta: 0, dTheta: Math.PI / 120,

  // Updates the object rotation each frame
  update: function() {
    this.theta += this.dTheta;
  },

  // Draws the object onto the canvas each frame
  draw: function(ctx, canvas) {
    ctx.fillStyle = "#ada";
    ctx.save();
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate(this.theta);
      ctx.fillRect(-this.size/2, -this.size/2, this.size, this.size);
    ctx.restore();
  }
})

// Finally place the canvas in the body tag and begin animation
.place("body").play(33);​

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar