1.1.1 HTML5 Canvas 的元素
在HTML5页面里， canvas就是像<div>， <a>， 或 <table>之类的一种标签，所不同的是， canvas需要用Javascript来渲染。要使用canvas，我们就需要在HTML5文件的适当位置添加 canvas标签，然后创建一个Javascript初始化函数，使这个函数在页面加载的时候就执行，同时在函数里用调用 HTML5 Canvas API在canvas上画图就可以了。比如我们像下面这样添加一个id为 myCanvas的canvas标签：
<body>
<canvas id="myCanvas"></canvas> </body>
然后添加初始化Javascript函数：
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
// 在此添加绘图代码
};
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>
HTML5 Canvas 有关元素的说明
上述代码将在本文后续中作为 HTML5 Canvas程序的基本模板。就像其他HTML标签一样，我们也
可以用canvas标签的 height 和 width属性为canvas指定其在页面上高度和宽度。在初始化
Javascript函数中，我们可以用canvas标签的id获得canvas的DOM对象，并用getContext() 方法获得这个canvas的“2d”上下文对象，其后的绘图操作都将以此上下文对象为基础。