我正在尝试使用 phonegap 和 jquerymobile 编写一个应用程序。我的应用程序从图像数组中绘制 4 个图像，当我触摸 1 个图像时，调用 1 个页面以全屏显示图像，但它不像我想要的那样绘制，只有 2 个图像显示在另一个页面中，其他图像仍然不显示。请检查我的代码并告诉我我出了什么问题。感谢阅读。这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ListApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="ui/jquery-ui.js"></script>
<script src="cordova-2.5.0.js"></script>
<style>
img.fullscreen {
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
var drawCanvasImage = function (ctx,grid,row,x,y,w,h) {
return function() {
// window.alert('row:' + row);
ctx.drawImage(grid[row], x, y,w,h);
}
}
var sizedWindowWidth = ($(window).width() - 34);
var sizedWindowHeight = ($(window).height() - 34);
var r1=0;
var r2=0;
var mag = ["img/a1.png","img/a2.png","img/a3.png","img/a4.png","img/a5.png"];
var grid = new Array();
var sImg = new Array();
$("#canvas1").width(sizedWindowWidth);
$("#canvas1").height(sizedWindowWidth*3/10);
$("#canvas2").width(sizedWindowWidth);
$("#canvas2").height(sizedWindowWidth*1/10);
$("#canvas3").width(sizedWindowWidth);
$("#canvas3").height(sizedWindowWidth*3/10);
$("#canvas4").width(sizedWindowWidth);
$("#canvas4").height(sizedWindowWidth*1/10);
$("#canvas5").width(sizedWindowWidth/2 - 10);
$("#canvas5").height(sizedWindowWidth*1/10);
$("#canvas6").width(sizedWindowWidth/2 - 10);
$("#canvas6").height(sizedWindowWidth*1/10);
$("#canvas7").width(sizedWindowWidth/2 - 10);
$("#canvas7").height(sizedWindowWidth*1/10);
$("#canvas8").width(sizedWindowWidth/2 - 10);
$("#canvas8").height(sizedWindowWidth*1/10);
var canvas1 = $("#canvas1").get(0);
var canvas2 = $("#canvas2").get(0);
var canvas3 = $("#canvas3").get(0);
var canvas4 = $("#canvas4").get(0);
if(canvas1 && canvas2 && canvas3 && canvas4)
{
var ctx1 = canvas1.getContext('2d');
var ctx2 = canvas2.getContext('2d');
var ctx3 = canvas3.getContext('2d');
var ctx4 = canvas4.getContext('2d');
if(ctx1 && ctx2 && ctx3 && ctx4)
{
ctx1.canvas.width = sizedWindowWidth;
ctx1.canvas.height = sizedWindowWidth*3/10;
ctx2.canvas.width = sizedWindowWidth;
ctx2.canvas.height = sizedWindowWidth*1/10;
ctx3.canvas.width = sizedWindowWidth;
ctx3.canvas.height = sizedWindowWidth*3/10;
ctx4.canvas.width = sizedWindowWidth;
ctx4.canvas.height = sizedWindowWidth*1/10;
$("#canvasDraw").click(function(){
for(var r=0;r<2;r++) {
var x = 0;
var y = r*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[r] = Math.floor((Math.random()*4)+0);;
grid[r] = new Image();
grid[r].onload = drawCanvasImage(ctx1,grid,r,y,x,w,h);
ctx2.fillStyle = "#00ff00";
ctx2.fillRect(y, x, w, h/3);
ctx4.fillStyle = "#00ff00";
ctx4.fillRect(y, x, w, h/3);
grid[r].src = mag[sImg[r]];
}
for(var d=0;d<2;d++) {
var x = 0;
var y = d*sizedWindowWidth/2;
var w = sizedWindowWidth/2 - 5;
var h = sizedWindowWidth*3/10;
sImg[d+2] = Math.floor((Math.random()*4)+0);;
grid[d] = new Image();
grid[d].onload = drawCanvasImage(ctx3,grid,d,y,x,w,h);
grid[d].src = mag[sImg[d+2]];
}
for (var j=0;j<mag.length;j++) {
if(sImg[0] == j){
$('#img1').attr("src",mag[j]);
}
if(sImg[1] == j){
$('#img2').attr("src",mag[j]);
}
if(sImg[2] == j){
$('#img3').attr("src",mag[j]);
}
if(sImg[3] == j){
$('#img4').attr("src",mag[j]);
}
}
});
document.getElementById("mycanvas").addEventListener("touchstart", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchmove", touchHandler, false);
document.getElementById("mycanvas").addEventListener("touchend", touchHandler, false);
var x;
var y;
function touchHandler(e) {
if (e.type == "touchstart") {
console.log("touch start! x: " + x + "y: " + y);
e.preventDefault();
x = event.touches[0].pageX;
y = event.touches[0].pageY;
if (x>10 && x<150 && y>10 && y<140) {
$('#anh1').show();
}
if (x>166 && x<298 && y>10 && y<140) {
$('#anh2').show();
}
if (x>16 && x<150 && y<190 && y>265) {
$('#anh3').show();
}
if (x>166 && x<298 && y<190 && y>265) {
$('#anh4').show();
}
} else if (e.type == "touchmove") {
console.log("touch move!");
e.preventDefault();
} else if (e.type == "touchend" || e.type == "touchcancel") {
console.log("touch end!");
e.preventDefault();
}
}
}
}
$('#showimg1').click(function(){
$('#anh1').hide();
$('#mainpage').show();
});
$('#showimg2').click(function(){
$('#anh2').hide();
$('#mainpage').show();
});
$('#showimg3').click(function(){
$('#anh3').hide();
$('#mainpage').show();
});
$('#showimg4').click(function(){
$('#anh4').hide();
$('#mainpage').show();
});
});
</script>
<div data-role="page" id="mainpage">
<div data-role="header">
<h1>Ghep Tranh Tu</h1>
</div>
<div data-role="content" id="mycanvas" style="border:1px solid #d3d3d3;">
<canvas id="canvas1" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas2" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas3" style="border:1px solid #d3d3d3;margin:0;"></canvas>
<canvas id="canvas4" style="border:1px solid #d3d3d3;margin:0;"></canvas>
</div>
<ul id="wordstore" style="text-align:center;border:1px solid #d3d3d3;">
<ul style="text-align:center;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas5"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas6"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas7"></canvas></li>
<li style="display:inline;border:1px solid #d3d3d3;"><canvas id="canvas8"></canvas></li>
</ul>
<ul style="text-align:right;border:1px solid #d3d3d3;">
<li style="display:inline;border:1px solid #d3d3d3;"><input id="canvasDraw" type="button" value="New Game"/></li>
</ul>
</ul>
</div>
<div data-role="page" id="anh1">
<header data-role="header">
<a id="showimg1" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img1" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Dog -->
<div data-role="page" id="anh2">
<header data-role="header">
<a id="showimg2" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img2" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh3">
<header data-role="header">
<a id="showimg3" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img3" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
<div data-role="page" id="anh4">
<header data-role="header">
<a id="showimg4" href="#" data-icon="grid" data-iconpos="notext">Photos</a>
</header>
<img id="img4" src="img/a14.jpg" style="width:100%;height:100%;"/>
</div><!-- Page Gummy Bears -->
</body>
</html>
我修好了它！:D 我在“y<190 && y>265”处失败 感谢您的阅读。