一、HTML5画布 HTML5 Canvas
1.1画布元素Canvas Element
HTML5 Canvas元素是类似于<div>、<a>或<table>标记的HTML标记，其内容可通过JavaScript渲染呈现。要使用HTML5画布，首先要在HTML文档内添加canvas标签，然后使用JavaScript访问canvas对象，并创建canvas的上下文（context）对象，通过调用HTML5画布API方法绘制可视化内容。
在使用canvas时，理解canvas元素和canvas上下文之间的差异是很重要的。canvas元素是嵌入在HTML页面中的实际DOM节点，canvas上下文对象是一个具有属性和方法的对象，通过调用canvas上下文对象的属性和方法在画布元素内绘制、渲染图形。上下文可以是2D或WebGL（3D）。
每个canvas元素只能有一个上下文对象，如果我们多次调用getContext()方法，它将返回对同一个上下文对象的引用。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// do cool things with the context
context.font = '40pt Calibri';
context.fillStyle = 'blue';
context.fillText('Hello World!', 150, 100);
</script>
</body>
</html>
以上代码演示了在画布上绘制蓝色的Hello World文字。