Phonegap：在画布上加载图片的问题

Question

我正在开发phonegap中的应用程序。当我在浏览器中运行HTML代码时，在画布中正确加载图像，但是当我尝试在Android设备中加载画布时，并没有得到始终正确的结果。

HTML代码：

<canvas id="canvas1" width="65" height="300" style="background: #003AFF;"></canvas>

JAVASCRIPT代码：

<script type="text/javascript">
var IMAGE_HEIGHT = 100;
var IMAGE_TOP_MARGIN=0;
var SLOT_SEPARATOR_HEIGHT = 0;
var SLOT_HEIGHT=100;
var ITEM_COUNT=5;

$(document).ready( function() {
   document.addEventListener("deviceready", onDeviceReady, true);
});

function onDeviceReady() {
   LaodImages();
}

function preloadImages( images, callback ) {
   function _preload( asset ) {
      asset.img = new Image();
      asset.img.src = 'img/' + asset.id+'.png';

      asset.img.addEventListener("load", function() {
         _check();
      }, false);

     asset.img.addEventListener("error", function(err) {
        _check(err, asset.id);
      }, false);
   }
   var loadc = 0;
   function _check( err, id ) {
      if ( err ) {
      }
      loadc++;
      if ( images.length == loadc ){
         return callback()
      }
   }
   images.forEach(function(asset) {
      _preload( asset );
   });
}


function LaodImages() {
   var game = new Game();
   var items = [{id: '10'},{id: '1'},{id: '1'},{id: '1'},{id: '2'},];

   $('canvas').attr('height', IMAGE_HEIGHT * ITEM_COUNT * 2);
   $('canvas').css('height', IMAGE_HEIGHT * ITEM_COUNT * 2);

   preloadImages( items, function() {
      function _fill_canvas( canvas, items , can_num) {
         ctx = canvas.getContext('2d');
         ctx.fillStyle = '#ddd';

         for (var i = 0 ; i < ITEM_COUNT ; i++) {
             var asset = items[i];
             ctx.save();
             ctx.shadowColor = "rgba(0,0,0,0.5)";
             ctx.shadowOffsetX = 5;
             ctx.shadowOffsetY = 5;
             ctx.shadowBlur = 5;
             ctx.drawImage(asset.img, 5, i * SLOT_HEIGHT + IMAGE_TOP_MARGIN);
             ctx.drawImage(asset.img, 5, (i + ITEM_COUNT) * SLOT_HEIGHT + IMAGE_TOP_MARGIN);
             ctx.restore();
             ctx.fillRect(0, i * SLOT_HEIGHT, 100, SLOT_SEPARATOR_HEIGHT);
             ctx.fillRect(0, (i + ITEM_COUNT) * SLOT_HEIGHT, 100, SLOT_SEPARATOR_HEIGHT);
         }
      }
     _fill_canvas(game.c1[0], items,1);
   });

   function Game() {
     this.c1 = $('#canvas1');
   }
}
</script>