HTML5画图板PhoneGap移植
这次来看一下怎么把上次的HTML5画图板使用PhoneGap移植到Andriod上去。经过上一篇的PhoneGap环境的搭建，很轻松的就把一个HTML5的web应用移植到了Andriod上去，可以看出PhoneGap的强大。
1.添加自定义的JavaScript文件index.js
在www文件夹下添加js文件夹，在js文件夹下添加index.js
这里我重构了上一次的画板的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类的初始化代码。
<!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真的是个很有前途的东西。