如何在科爾多瓦畫圖像（.png）到畫布上？

Question

我想繪製一個我自己繪製到我的Android應用程序中的豬和其他一些動物的圖像。我從來沒有嘗試過製作應用程序，所以我不太確定如何做。我對JavaScript和HTML知之甚少。這裏是我的代碼：（頂部是科爾多瓦的標準，我不知道那是什麼）

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 - 事件觸發時科爾多瓦滿載。

可以繪製在畫布時，應用程序是添加監聽記錄準備：

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