使用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 
       });