如何绘制canvas学习笔记二中的图形？
摘要：上一篇我们已经讲述了canvas的基本用法，学会了构建canvas环境。现在我们就来学习绘制一些基本图形。 坐标 canvas的坐标原点在左上角，从左到右X轴坐标增加，从上到下Y轴坐标增加。坐标的一个单元是1像素。示意如下： 矩形 canv
上一篇我们已经讲述了canvas的基本用法，学会了构建canvas环境。现在我们就来学习绘制一些基本图形。
坐标
canvas的坐标原点在左上角，从左到右X轴坐标增加，从上到下Y轴坐标增加。坐标的一个单元是1像素。示意如下：
矩形
canvas可以绘制的多边形只有矩形，其他都要通过线段拼接而成。
绘制矩形有三个API：
fillRect(x, y, width, height)
绘制一个填充的矩形。
strokeRect(x, y, width, height)
绘制一个只有描边的矩形。
clearRect(x, y, width, height)
清除特定的矩形区域，使之变成透明。
参数说明：
x，y是矩形左上角的坐标，width和height是矩形的宽和高。
代码示例：
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
}
}
效果如下：
最外面那个黑色的矩形就是第一行代码ctx.fillRect(25, 25, 100, 100)画的填充矩形。中间的透明矩形就是第二行代码ctx.clearRect(45, 45, 60, 60)清除的矩形，再中间的描边矩形就是第三行代码ctx.strokeRect(50, 50, 50, 50)画的。
路径
绘制路径的一般步骤如下：
创造路径
绘制路径
闭合路径
填充路径或给路径描边
绘制的代码如下：
ctx.beginPath(); // 创造路径
// 路径绘制，先省略，后面再路径绘制的方法
ctx.closePath(); // 闭合路径
ctx.stroke(); // 描边
// ctx.fill(); // 换成这行命令就是填充
在这个一般步骤中，只有闭合路径步骤可以省略，其他步骤都是不可省略的。如果不需要画闭合的图形，可以不闭合路径。
接下来讲述绘制路径的方法。
移动画笔
moveTo(x, y)这个方法可以移动画笔的坐标，将画笔移动到坐标(x, y)的位置。
用beginPath()创造路径时，要先用moveTo(x, y)确定起始位置，除非是圆弧之类不需要初始点的路径绘制方法。
线段
lineTo(x, y)方法绘制一条线段，x, y指定了线段末尾的坐标。配合moveTo(x, y)方法就可以画出线段。
示例：
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,0)
ctx.lineTo(50,50);
ctx.lineTo(100,50);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(75,0)
ctx.lineTo(70,50);
ctx.lineTo(150,50);
ctx.closePath();
ctx.stroke();
}
效果如下：
再来画个三角形：
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();
}
效果：
矩形******
同样的，路径方法里也有绘制矩形的方法。