1.canvas大小的初始化
<canvas id="tutorial" width="150" height="150"></canvas>片
canvas 标签只有两个属性—— width和height。这些都是可选的，并且同样利用 DOM properties 来设置。
当没有设置宽度和高度的时候，canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小，但在绘制时图像会伸缩以适应它的框架尺寸：如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。
2.替换内容
canvas 相比于img标签很容易展示替代的内容，以为canvas的不同浏览器支持率不是很高。利用下面的方法，不支持canvas的浏览器将会忽略容器，渲染其中的内容。而支持的浏览器将会直接渲染标签而忽略其中的文字。
<canvas id="stockGraph" width="150" height="150">
current stock price: $3.15 +0.15
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>
3.标签不可省略
canvas标签需要闭合。如果标签不结束下文的内容将会被认为是替代的内容从而不进行渲染。
4. 渲染上下文（The rendering context）
canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
代码的第一行通过使用 document.getElementById() 方法来为
5.检查支持性
检查canvas DOM元素是否有获取上下文这个api来检测浏览器是否支持canvas
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
6.一个简单例子
一开始，让我们来看个简单的例子，我们绘制了两个有趣的长方形，其中的一个有着alpha透明度。我们将在接下来的例子里深入探索一下这是如何工作的。
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
