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

查看提供的使用图像并执行其操作的示例之一。

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

例如：

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

Answer 2

这取决于你的目标。如果您只想绘制图像 - 您可以使用普通上下文，而无需创建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.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

使用LibCanvas绘制图像

2 个答案: