1. Canvas简介单纯的canvas是指一块画布，你可以在这块画布上绘制任何你需要的图形图象内容。Canvas具有最基本的绘制区域的宽与高两个属性，以及该元素的名字属性。在使用之前可以用前面的检测方法得知当前浏览器是否支持canvas元素。定义一个画布：- <canvas id="mycanvas" width="400" height="400"></canvas>
在javasrcipt中，就可以在document里取得该画布的句柄：
- var mycanvas = document.getElementById("mycanvas");
默认的画布在创建完成之后只是一块空白的白色区域，可以通过javascript填充画布，完成各种各样的效果，小至一个小图片、小图形，大到一个游戏等等。目前HTML 5只支持2D上下文，标准中提到未来可能会定义一个3D的上下文。所以现在getContext的参数一定只能传递"2d"。
最简单的画布绘制动作比如填充，你只需要拿到这个画布的句柄，然后得到它的上下文，就可以用fillRect方法填满整个区域。如上面的mycanvas，可以用如下代码完成填充：定义画布：
- <canvas id="mycanvas" width="400" height="400" onclick="fill_mycanvas()"></canvas>
- <script language="Javascript">
-
function fill_mycanvas()
-
{
-
var mycanvas = document.getElementById("mycanvas");
-
var mycontext = mycanvas.getContext("2d");
-
mycontext.fillRect(0, 0, 400, 400);
-
}
-
</script>
这样当单击画布的时候，就会将画布区域完全填充为当前设定的填充颜色。
矩形填充HTML 5规定了一系列方法：
fillStyle（按CSS颜色，某种模式或某种梯度填充）、fillRect（用当前颜色填充）、strokeStyle（与fillStyle类似，但是用于边框部分的绘制）、strokeRect（与fillRect类似，但用于边框部分的绘制）、clearRect（清除矩形区域）。
2. Canvas坐标系
Canvas使用的是以左上角为(0, 0)点，向右下方增大的坐标系。
3. Canvas绘制方法
1) Path绘制路径
Path可以认为是画线工具，它指定一个起始点和终止点，然后从两点之间绘制一条直线。用到的函数有：
- moveTo(x, y);
-
lineTo(x, y);
但使用这些方法只是规定了系列的线条，并没有实际用某种颜色把它们画出来，所以需要设定一个绘制的颜色（也就是前文提到的填充颜色）。以黑色为例：
- context.strokeStyle="#000";
-
context.stroke();
如绘制一个网格：可以参考如下页面。
- <pre name="code" class="html"><!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset=gb2312" />
-
Canvas
-
-
-
-
-
-
-
-
- By zanosy@126.com
-
