本节书摘来自异步社区《HTML5 canvas开发详解（第2版）》一书中的第2章，第2.1节,作者： 【美】Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社区“异步社区”公众号查看。
HTML5 Canvas的使用是以强大的绘图、着色和基本二维形状变换为基础的。然而，可供选择的内建形状相对有限，程序员可以通过一组称作路径的线段来绘制出想要的形状。2.4节将涉及相关内容。
提示可以采用在线形式很好地了解HTML5 Canvas API。WSC网站上有详尽且不断更新的参考，具体地描述了Canvas 2D绘图API的功能。然而，这个在线参考缺少使用API的具体例子。本书避免简单地介绍各个参数的使用，将花时间通过创建示例来解释并探索尽可能多的功能。2.1 本章基本文件设置如同开始讲到绘图API时那样，本章中的示例也将使用相同的基本文件设置。这段代码为本书所有示例的基础，使用时只需改变drawScreen()函数的内容即可，具体如下。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ch2BaseFile - Template For Chapter 2 Examples</title> <script src="modernizr.js"></script> <script type="text/javascript"> window.addEventListener('load', eventWindowLoaded, false); function eventWindowLoaded(){ canvasApp(); } function canvasSupport (){ return Modernizr.canvas; } function canvasApp(){ if (!canvasSupport()){ return; }else{ var theCanvas = document.getElementById("canvas"); var context = theCanvas.getContext("2d"); } drawScreen(); function drawScreen(){ //改变这里 context.fillStyle = '#aaaaaa'; context.fillRect(0, 0, 200, 200); context.fillStyle = '#000000'; context.font = '20px _ sans'; context.textBaseline = 'top'; context.fillText ("Canvas!", 0, 0); } } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvas" width="500" height="500"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html> 相关资源：敏捷开发V1.0.pptx