访问 canvas 上绘制的图像

Question

我想将对象（宇宙飞船）添加到对象可以在其上移动的瓦片地图。我已经在 canvas 中创建了一个 tilemap。还有一些按钮来导航它们。一键在地图上创建宇宙飞船。

问题是，我无法访问我的飞船，它被吸引到 Canvas。我的想法是，我创建一个图像 class，这将帮助我通过 Jquery 访问图像。但那是行不通的。有没有简单的方法，如何通过单击按钮移动图片？

$("#b_generate_ship").click(function() {
    var spaceship = new Image();
    spaceship.src = '\grafiken\/spaceship.png'
    spaceship.className = "spaceship";
    context.drawImage(spaceship , 600, 50);   
    console.log("Ship generated");
});

$("#b_fly_left").click(function() {
    $(".spaceship").animate({ "left": "+=50px" }, "slow" );
    console.log("left flight");
});

Answer 1

使用 Pixi.js 进行这种 canvas 操作，您可以在 canvas 上绘制时创建并跟踪精灵对象并为其设置动画 + 一大堆其他很棒的东西事物。

http://www.pixijs.com/

访问 canvas 上绘制的图像

Accessing drawn image on canvas

html

javascript

jquery

game-physics