<canvas>是HTML5里其中一个强大的元素，它能够使用JavaScript来制作图像，动画，游戏，图表，或其它图形类的画像等等。这个教程将描述如何在你的HTML页面中使用<canvas>元素。 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践。这项教程是非常适合所有的初学者，因为它简单，易懂，一学就会。
本教程包含
- 第一册: 基本用法
- 第二册: 绘制图形（现以英文版呈现；中文版即将推出）
- 第三册: 使用图像（现以英文版呈现；中文版即将推出）
- 第四册: 使用HTML5 Canvas来制作动画（现以英文版呈现；中文版即将推出）
- 第五册:HTML5 Canvas处理用户输入（现以英文版呈现；中文版即将推出）
- 第六册: HTML5 Canvas框架（现以英文版呈现；中文版即将推出）
支持HTML5<canvas>的浏览器
在我们开始之前，先来看看有哪几个浏览器是支持HTML5<canvas>元素:
- Internet Explorer (9.0+)
- Safari (3.0+)
- Firefox (3.0+)
- Chrome (3.0+)
- Opera (10.0+)
- iOS (1.0+)
- Android (1.0+)
入门
[html]
<canvas id="myCanvas" width="300" height="300">
[/html]
<canvas>元素看起来和其它的HTML元素没什么两样。<canvas>元素只有两个属性width和height。必须注意的是，每一次使用的时候都必须设置<canvas>的width和height，那就可以避免在绘制时图像会出现扭曲。
所以在HTML文档里，你的<canvas>元素将会是如下所示：
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
<!– 为用户提供替换内容 –>
对不起，您的浏览器不支持Canvas
</canvas>
</body>
</html>
[/html]
检查浏览器对<canvas>的支持性，如果浏览器不支持<canvas>就为用户提供替换内容或讯息。
明白<canvas>的画布坐标(Coordinate System)
在我们开始画图之前，我们需要了解一下<canvas>的画布坐标(Coordinate System)。如果你在这之前有使用过任何其他2D图形编程语言，那么你应该熟悉标准的笛卡尔(Cartesian)的左上角坐标系统的（0,0），那就是任何图形坐标都是从左上角开始数。例如，如果你想移动一个矩形到右边，那么你就需要增加X轴值; 反之，如果你想把矩形往下移动，那么你就必须增加Y轴值。
绘制简单的图形
我们需要依赖JavaScript来帮助我们在<canvas>画布上绘制图像。<canvas>元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文(rendering context)和它的绘画功能。getContext()只有一个参数，那就是上下文的格式(2D, 或3D)。在本教程里，我们只会专注探讨2D的渲染上下文格式。
[javascript]
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext(‘2d’);
[/javascript]
OK, 我们现在就来开始在空白的<canvas>画布上绘制图形：
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
<script type="text/javascript">
function drawShape() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 100, 100);
}
</script>
</head>
<body onload="drawShape()">
<canvas id="myCanvas" width="300" height="300">
<!– 为用户提供替换内容 –>
对不起，您的浏览器不支持Canvas
</canvas>
</body>
</html>
[/html]
保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你会看到一个黑色的矩形，如下所示：
上面的脚本中包含一个叫做draw()的函数。当页面加载结束的时候就会执行这个函数，而这个函数里就有一项由<canvas>提供执行绘制矩形的函数 －fillRect。fillRect函数包含了四种参数，分别是左上角(x, y，宽度以及高度。如下所示：
[javascript]
ctx.fillRect(x, y, width, height);
[/javascript]
很简单对不对？:D 来点更好玩的，让我们继续来改制我们刚创建的矩形。
更多绘制矩形的方法
除了fillRect函数以外，<canvas>也提供了另外两种绘制矩形的方法：分别是strokeRect与clearRect。
‘strokeRect‘函数让我们绘制一个矩形的边框。试看在你的文档里加入strokeRect函数，如下所示：
[javascript]
ctx.strokeRect(10,10,120,120)
[/javascript]
保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你应该会看到如图下所示的那样：
我们为刚创建的矩形加上了边框耶！
那么下一步呢就是使用刚才提到的’clearRect‘。’clearRect‘函数是用来清除指定矩形区域，让清除部分完全透明。试看在你的文档里加入clearRect函数，如下所示：
[javascript]
ctx.clearRect(45,45,50,50);
[/javascript]
再次保存你的文档，然后使用支持<canvas>的浏览器浏览这个文档，你应该会看到矩形中间的部分变成白色了，如图下所示的那样：
注：’ strokeRect‘与’ clearRect‘函数具有和’fillRect‘函数一样的参数，那就是(x, y, 宽度, 高度)
总结
[html]
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
<script type="text/javascript">
function drawShape() {
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 100, 100);
ctx.strokeRect(10,10,120,120);
ctx.clearRect(45,45,50,50);
}
</script>
</head>
<body onload="drawShape()">
<canvas id="myCanvas" width="300" height="300">
<!– 为用户提供替换内容 –>
对不起，您的浏览器不支持Canvas
</canvas>
</body>
</html>
[/html]
我们将在接下来的教程里介绍更多canvas元素的其他功能。敬请留意！
关注onlyWebPro.com的官方微博，以获取更多的HTML5免费教程！
马上关注onlyWebPro.com官方微博！