javascript - 如何在 Cordova 中将图像 (.png) 绘制到 Canvas 上？

Question

我想在 Android 应用程序中绘制 pig 和其他一些我自己绘制的动物的图像。我以前从未尝试过制作应用程序，所以我不太确定该怎么做。我对 JavaScript 和 HTML 的了解很少。这是我的代码:(顶部部分是 Cordova 的标准部分，我不知道它的作用)

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady,     false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the     'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};
app.initialize();





var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var pig = { x: 10, y: 10, w: 100, h: 100, img: new Image(), sound: new     Media("android_asset/www/sfx/pig.wav")};
var cow = { x: 130, y: 10, w: 100, h: 100, img: new Image(), sound: new     Media("android_asset/www/sfx/cow.wav")};
var cat = { x: 10, y: 130, w: 100, h: 100, img: new Image(), sound: new     Media("android_asset/www/sfx/cat.wav")};
var dog = { x: 130, y: 130, w: 100, h: 100, img: new Image(), sound: new     Media("android_asset/www/sfx/dog.wav")};

pig.img.src = "android_asset/www/img/pig.png"
cow.img.src = "android_asset/www/img/cow.png";
cat.img.src = "android_asset/www/img/cat.png";
dog.img.src = "android_asset/www/img/dog.png";

pig.sound.src = "../sfx/pig.wav";
cow.sound.src = "../sfx/cow.wav";
cat.sound.src = "../sfx/cat.wav";
dog.sound.src = "../sfx/dog.wav";

pig.sound.play();

function draw() {
    ctx.drawImage(pig.img, pig.x, pig.y);
    ctx.drawImage(cat.img, cat.x, cat.y);
    ctx.drawImage(cow.img, cow.x, cow.y);
    ctx.drawImage(dog.img, dog.x, dog.y);

    requestAnimationFrame(draw);
}
draw();

Answer 1

onDeviceReady - The event fires when Cordova is fully loaded.

当应用程序准备就绪时，您可以通过向文档添加监听器来绘制 Canvas :

document.addEventListener("deviceready", draw, false);