这次来看一下怎么把上次的HTML5画图板使用PhoneGap移植到Andriod上去。经过上一篇的PhoneGap环境的搭建，很轻松的就把一个HTML5的web应用移植到了Andriod上去，可以看出PhoneGap的强大。
1.添加自定义的JavaScript文件index.js
在www文件夹下添加js文件夹，在js文件夹下添加index.js
这里我重构了上一次的画板的JavaScript文件，不过代码的关键点是全部一样的。我只不过是按照面向对象的方式重构了一下代码。正好学习JavaScript怎么实现一个类，怎么调用方法等，挺有意思的。
代码语言：javascript复制function App()
{
var _this=this;
_this.initialize=function()
{
//注册设备初始化完成事件
document.addEventListener("deviceready", onDeviceReady, false);
}
var onDeviceReady=function()
{
var can = new Can();
can.bindEvents();//绑定事件
}
}
function Can ()
{
var _this=this;
var lastX;//最后一次触摸的x坐标
var lastY;//最后一次触摸的y坐标
var canvas = document.getElementById("canvas");
var context =canvas.getContext("2d");
var init=function()
{
lastX=0;
lastY=0;
//全屏canvas
canvas.width=window.screen.width;
canvas.height=window.screen.height;
context.lineWidth=10;//画笔粗细
context.strokeStyle="#FF0000";//画笔颜色
};
//绑定事件
_this.bindEvents = function()
{
try
{
//注册监听
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
catch(err)
{
alert(err.message);
}
};
//触摸开始
var onTouchStart=function()
{
try
{
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
//画点
drawRound(lastX,lastY);
}
catch(err)
{
alert(err.message);
}
};
//触摸移动
var onTouchMove=function()
{
try
{
event.preventDefault();
//画线
drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
catch(err)
{
alert( err.message);
}
};
//画圆
var drawRound = function (x,y)
{
try
{
context.fillStyle="#FF0000";
context.beginPath();
context.arc(x,y,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
catch(err)
{
alert(err.message);
}
};
//画线
var drawLine = function (startX,startY,endX,endY)
{
try
{
context.beginPath();
context.lineCap="round";
context.moveTo(startX,startY);
context.lineTo(endX,endY);
context.stroke();
}
catch(err)
{
alert(err.message);
}
};
init();
} ;2.修改index.html
这个html代码跟上次的web应用完全一样。只添加了对App类的初始化代码。
代码语言：javascript复制<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>HTML5Paint</title>
<script src="http://debug.phonegap.com/target/target-script-min.js#6CFB7EA06AB04AFBB33FD97AE40691C5"></script>
<script type="text/javascript" src="cordova-2.6.0.js" charset="utf-8"></script>
<script type="text/javascript" src="js/index.js" charset="utf-8"></script>
<script type="text/javascript">
try
{
var app=new App();
app.initialize();//初始化
}
catch(err)
{
alert(err.message);
}
</script>
</head>
<body>
<canvas id="canvas" ></canvas>
</body>
</html>3.在Andriod上的效果
这次移植过程可以看到是相当的轻松，几乎是原封不动的就把一个web用移植到了Andriod上去。所花费的成本真的很小很小，phoneGap真的是个很有前途的东西。
