html5移植android技术要点攻破.ppt

在Android中构建HTML5离线应用 //开启应用程序缓存 webSettingssetAppCacheEnabled(true); String dir = this.getApplicationContext().getDir(cache, Context.MODE_PRIVATE).getPath(); //设置应用缓存的路径 webSettings.setAppCachePath(dir); //设置缓存的模式 webSettings.setCacheMode(WebSettings.LOAD_DEFAULT); //设置应用缓存的最大尺寸 webSettings.setAppCacheMaxSize(1024*1024*8); //扩充缓存的容量 public void onReachedMaxAppCacheSize(long spaceNeeded, long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { quotaUpdater.updateQuota(spaceNeeded * 2); } 使用Canvas绘制图形图像 什么是 Canvas？ HTML5的canvas元素使用JavaScript在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建Canvas元素 向HTML5页面添加canvas元素。 规定元素的 id、宽度和高度： canvas id=myCanvas width=200 height=100/canvas 通过 JavaScript 来绘制 canvas元素本身是没有绘图能力的。所有的绘制工作必须在JavaScript内部完成： script type=text/javascript //通过id获取canvas元素 var c=document.getElementById(myCanvas); //创建context对象 var cxt=c.getContext(2d); cxt.fillStyle=#FF0000; cxt.fillRect(0,0,150,75); /script Android应用开发新路线 利用HTML5开发Android应用程序！ Android与HTML5融合 Android的HTML5应用程序概述 如何适配多分辨率的Android设备？ 如何在Android中构建HTML5应用程序？ 如何在Android中调试HTML5应用程序？ 如何在Android中使用HTML5的本地储存？ 如何在Android中使用HTML5的本地数据库？ 如何在Android中使用HTML5的地理定位？ 如何在Android中构建HTML5离线应用？ 如何使用Canvas进行绘图？ Android HTML5应用概述 适配多分辨率的Android设备 Android浏览器加载WEB页面时，如果用户没有禁止启用”预览模式“，那么将默认为“预览模式“，通常会缩小WEB页面。而当页面在WebView中显示时，会采用”完全载入“的方式，即保证WEB页面的原始大小。 设备屏幕的密度是基于屏幕的分辨率（由每英寸所包含的点数（dpi））定义的。Android支持三种类别的屏幕密度：低（ldpi），中（mdpi）和高（hdpi）。与中等密度屏幕相比，低密度屏幕每英寸像素较少，高密度屏幕每英寸像素较多。默认情况下，Android浏览器和 WebView是针对中等密度的屏幕。Android浏览器和 WebView 在高密度屏幕上将Web页面缩放约1.5倍（因为中等密度屏幕像素较小），而在低密度屏幕上将Web页面缩放约0.75倍（因为中等密度屏幕像素大）。 viewport属性的应用 viewport需要放置在HTML的meta标签中，在meta标签的 content属性中，就可以定义多个视窗特性。包括视窗的宽度、高度、缩放比例，目标设备密度等，但是，需要注意每个视窗属性必须有逗号隔开。 head titleExmaple/title meta name=”viewport” content=”width=device-width,user-scalable=no”/ /head meta name=viewport content= height = [pixel_value | device-height] , width = [pixel_value |