使用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

這取決於你的目標。因爲你在幀繪製不

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

您的圖片自敗： - 如果你只是想畫的圖像，你可以使用普通的背景下，而無需創建LibCanvas對象。因此，第二種方法 - 就是把它畫在「渲染」部分：

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

有關您可以寫信給我LibCanvas答案，shocksilien@gmail.com

Answer 2

查看提供的使用圖像並執行其操作的示例之一。

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

例如：

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