0

キャンバスに画像の配列を描画しようとしていますが、何も描画されません! 以下は私のコードです！また、phonegap と javascript index.html について学習しようとしています。

    <!DOCTYPE html>
<html>
<head>
<title>Minecraft Background Check</title>
</head>
<body>
<canvas id="mycanvas" style="position:fixed; top:0; left:0; border:1px solid #c3c3c3; width: 100%; height: 100%;"></canvas>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready",ondeviceReady,false);
function onDeviceReady () {}
    //get element by id 
var c = document.getElementById("mycanvas");
var ctx = c.getContext("2d");
    //array image which need to draw in canvas
var image = ["img/image12","img/image13","img/image14","img/image15","img/image10"];
var m_arrImages = {};
for (var src in image) {
    m_arrImages[src] = new Image();

    m_arrImages[src].src = image[src];
}
var imagePositionsX = [20, 80, 140, 200, 260, 320, 380, 440, 500, 560];
var imagePositionsY = [20, 60, 100, 140, 180, 220, 260, 300, 340, 380];
var i, x, y;
for (i = 0; i < m_arrImages.length; i++) {
    x = imagePositionsX[ Math.floor(Math.random()*10) ];
    y = imagePositionsY[ Math.floor(Math.random()*10) ];

    ctx.drawImage(m_arrImages[i], x, y, 50, 50);
}
</script>
</body>
</html>
4

2 に答える 2

2

ondeviceReadyイベントで実行する関数を設定しましdevicereadyたが、その関数は定義されていません。という関数を定義しましたonDeviceReady。JavaScript の変数名と関数名は大文字と小文字が区別されるため、devicereadyイベントでは何も実行されません。

変化する：

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

に

document.addEventListener("deviceready",onDeviceReady,false);
于 2013-03-08T08:53:03.060 に答える
1

私が間違っているかもしれませんが.. "m_arrImages" - 画像ではなく、文字列を含む単なる配列ですよね?

私は、それはそのようなものであるべきだと思います：

var m_arrImages = {};
for (var src in image) {
    m_arrImages[src] = new Image();
    m_arrImages[src].src = image[src];
}
于 2013-03-08T08:57:32.037 に答える