下载掌阅APP，畅读海量书库
立即打开
本节我们开始实际操作，编写一个简单的HTML 5移动APP，让读者对移动APP技术有一个初步的了解。
在编辑器的选择上，Web前端开发自由度是非常高的，即使是文本文档编辑器也可以作为Web开发的工具，但是为了提高开发效率，还是要选择一款功能强大且时髦的编辑器。笔者推荐的是近年来席卷前端界的Sublime Text，一款独具个性的高级编辑器，如图1.3所示。
图1.3 Sublime Text编辑器
Sublime Text支持目前主流的操作系统，如Windows、Mac、Linux，同时还支持32和64位，支持各种流行编程语言的语法高亮、代码补全等。该款编辑器插件相当丰富，同时版本更新勤快。非常酷的一点是编辑器右边没有滚动条，取而代之的是代码缩略图。Sublime Text是一款收费软件，不过目前为止可以无限期地使用。
提示
Sublime Text还有很多意想不到的强大功能，读者可以自行下载体验，下载地址为http://www.sublimetext.com/3。
下面我们就编写一个简单的HTML 5 Hello APP代码，让读者直观地体会一下HTML 5移动应用的魅力，详见【代码1-5】。
【代码1-5】
01 <html>
02 <canvas id="myCanvas"></canvas>
03 <script type="text/javascript">
04 console.log("get id - myCanvas");
05 var canvas = document.getElementById('myCanvas');
06 console.log("get context - myCanvas");
07 var context = canvas.getContext("2d");
08 console.log("set context font - myCanvas");
09 context.fillStyle = '#808080';
10 context.font = 'italic 16px sans-serif';
11 context.textBaseline='top';
12 context.fillText('Hello World!', 0, 50);
13 context.font = 'bold 24px sans-serif';
14 context.fillText('Hello world!', 0, 100);
15 </script>
16 </html>
关于【代码1-5】的具体分析如下：
第02行代码定义了HTML 5控件<canvas>，其具体含义是一个画布，可以支持设计人员的自定义图形。
第03～15行为脚本代码，通过JavaScript实现在<canvas>控件上的图形操作，具体方法的含义读者可以参考HTML 5相关文档，本章就不做深入介绍了。同时，第04、06和08行代码分别使用console.log()方法在控制台输出调试信息。
调试运行HTML 5 APP可以选择专业的HTML调试工具，还可以直接使用具有调试功能的浏览器，譬如Google Chrome、Firefox和Opera这些支持HTML 5标准的浏览器均有强大的调试功能。
下面我们在Firefox浏览器中运行【代码1-5】，页面效果如图1.4所示。然后，我们打开调试器界面（快捷键Ctrl+Shift+J），查看一下调试信息的输出，如图1.5所示。
图1.4 Hello APP运行效果图
图1.5 Hello APP调试运行效果图
从图1.5中可以看到，【代码1-5】中第04、06和08行代码使用console.log()方法在控制台输出的调试信息全部成功显示出来了。