LibCanvasを使用して画像を描画する

Question

現在、LibCanvasを使用してhtmlページにキャンバスの描画を行っていますが、画像を描画する方法がわかりません。誰もこれで私を助けることができますか？

http://libcanvas.github.com/

編集：私は現在、この作品のコードを使用しています、私は描画されている画像を見たが、それは。消えます。

var libcanvas = new LibCanvas('canvas', { preloadImages: false }).start(); 

var img = new Image(); 
img.src = 'images/draw.png'; 
img.width = 400; 
img.height = 400; 

libcanvas.addEvent('ready', function() 
{ 
    libcanvas.ctx.drawImage(img); 
}); 

Answer 1

それはあなたの目的に依存します。 あなただけの画像を描画したい場合 - あなたはLibCanvasオブジェクトを作成することなく、プレーンなコンテキストを使用することができます。

var img = atom.dom.create('img', { src: 'images/draw.png' }) 
    .bind('load', function() { 
     atom.dom('canvas').first 
      .getContext('2d-libcanvas') 
      .drawImage(img); 
    }); 

あなたのイメージ。消えるを使用すると、フレームの中にない描くため。 - だから、第二の方法は、「レンダリング」の部分でそれを描画することです：

new LibCanvas('canvas', { 
    preloadImages: { foo: 'images/draw.png' } 
}).start(function() { 
    this.ctx.drawImage(this.getImage('foo')); 
}); 

正しい方法あなたは大きなアプリを作成しよう - 特別なオブジェクト作成されています。あなたができるように

LibCanvas.extract(); 

var ImageDrawer = atom.Class({ 
    Extends: DrawableSprite, 

    initialize: function (sprite, shape) { 
     this.sprite = sprite; 
     this.shape = shape; 
    } 
}); 

new LibCanvas('canvas', { 
    preloadImages: { foo: 'images/draw.png' } 
}) 
.start() 
.addEvent('ready', function() { 
    var drawTo = new Rectangle(0, 0, 100, 100); 
    var drawer = new ImageDrawer(this.getImage('foo'), drawTo); 
    this.addElement(drawer); 
}); 

を簡単に作る、例えばドラッグ可能：あなたは私に書くことができLibCanvasについての回答については

LibCanvas.extract(); 

var ImageDrawer = atom.Class({ 
    Extends: DrawableSprite, 

    Implements: [ Draggable ], 

    initialize: function (sprite, shape) { 
     this.sprite = sprite; 
     this.shape = shape; 
    } 
}); 

new LibCanvas('canvas', { 
    preloadImages: { foo: 'images/draw.png' } 
}) 
.start() 
.addEvent('ready', function() { 
    var drawTo = new Rectangle(0, 0, 100, 100); 
    var drawer = new ImageDrawer(this.getImage('foo'), drawTo); 
    this.addElement(drawer); 
    drawer.draggable(); 
}); 

、shocksilien@gmail.com

Answer 2

画像を使用し、それが何をしているかを示す例の1つを見てください。例えば

http://libcanvas.github.com/games/asteroids/

は：

this.libcanvas.ctx.drawImage({ 
        image : engines[type].image, 
        center : this.somePosition, 
        angle : this.angle 
       });