Canvas-绘制图形

• Canvas教程-MDN
• HTML 5 Canvas 参考手册

绘制形状

canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐标为（x,y））。

路径path

路径绘制图形步骤：

1. 创建路径起始点, beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
2. 使用画图命令去画出路径,如：ctx.strokeRect(50, 50, 50, 50)
3. 封闭路径，closePath()闭合路径之后图形绘制命令又重新指向到上下文中,不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。
4. 一旦路径生成，就能通过描边或填充路径区域来渲染图形。stroke()通过线条来绘制图形轮廓;fill()通过填充路径的内容区域生成实心的图形。

直线lineTo

语法：

context.lineTo(x, y);

参数	描述
x	路径的目标位置x坐标
y	路径的目标位置y坐标

var canvas = document.getElementById('canvas');
if (canvas.getContext){
	var ctx = canvas.getContext('2d');

	// 填充三角形
	ctx.beginPath();
	ctx.moveTo(25,25);
	ctx.lineTo(105,25);
	ctx.lineTo(25,105);
	ctx.fill();

	// 描边三角形
	ctx.beginPath();
	ctx.moveTo(125,125);
	ctx.lineTo(125,45);
	ctx.lineTo(45,125);
	ctx.closePath();
	ctx.stroke();
}

矩形rect

语法：

context.rect(x, y, width, height);

context.fillRect(x, y, width, height);
context.clearRect(x, y, width, height);
context.strokeRect(x, y, width, height);

参数值：

参数	描述
x	矩形左上角的 x 坐标
y	矩形左上角的 y 坐标
width	矩形的宽度，以像素计
height	矩形的高度，以像素计

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.beginPath();
	ctx.lineWidth="6";
	ctx.strokeStyle="red";
	ctx.rect(0,0,150,150);
	ctx.stroke();
}

fillRect()函数绘制了一个边长为100px的黑色正方形。clearRect()函数从正方形的中心开始擦除了一个6060px的正方形，接着strokeRect()在清除区域内生成一个5050的正方形边框。

绘制三角形

var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
       
        ctx.beginPath();
        ctx.moveTo(75, 50); //moveTo(x, y) 将笔触移动到指定的坐标x以及y上。
        ctx.lineTo(100, 75);
        ctx.lineTo(100, 25);
        ctx.fill();
    }

圆形arc

语法：

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

参数值：

参数	描述
x	圆的中心的 x 坐标。
y	圆的中心的 y 坐标。
r	圆的半径。
sAngle	起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle	结束角，以弧度计。
counterclockwise	可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

var canvas = document.getElementById('canvas');
if (canvas.getContext){
	var ctx = canvas.getContext('2d');

	ctx.beginPath();
	ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
	ctx.moveTo(110,75);
	ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
	ctx.moveTo(65,65);
	ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
	ctx.moveTo(95,65);
	ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
	ctx.stroke();
	
	// 无moveTo则展现完整路径
	ctx.beginPath();
	ctx.strokeStyle="red";
	ctx.arc(175,75,50,0,Math.PI*2,true); // 绘制
	//ctx.moveTo(210,75);
	ctx.arc(175,75,35,0,Math.PI,false);   // 口(顺时针)
	//ctx.moveTo(165,65);
	ctx.arc(160,65,5,0,Math.PI*2,true);  // 左眼
	//ctx.moveTo(195,65);
	ctx.arc(190,65,5,0,Math.PI*2,true);  // 右眼
	ctx.stroke();
	
}

圆弧arcTo

语法：

arcTo(x1, y1, x2, y2, radius)

参数	描述
x1	切线起点的 x 坐标。
y1	切线起点的 y 坐标。
x2	切线终点的 x 坐标。
y2	切线终点的 y 坐标。
r	圆的半径。

点(x1, y1)分别与点(x2, y2)及当前笔触点(x0, y0)构成两条切线，绘制的弧线是两个切点之间以r为半径的最短圆弧。

详解：Canvas学习：绘制圆和圆弧

/*
*
* ctx 画布
* x , y 左上角坐标
* width, height 矩形宽高
* r 弧形半径
* */
function drawRoundedRect(ctx, x, y, width, height, r) {
	ctx.save();
	ctx.beginPath();

	// draw top and top right corner
	ctx.moveTo(x + r, y);
	ctx.arcTo(x + width, y, x + width, y + r, r);

	// draw right side and bottom right corner
	ctx.arcTo(x + width, y + height, x + width - r, y + height, r);

	// draw bottom and bottom left corner
	ctx.arcTo(x, y + height, x, y + height - r, r);

	// draw left and top left corner
	ctx.arcTo(x, y, x + r, y, r);

	ctx.fill();
	ctx.stroke();

	ctx.restore();
}
var canvas = document.getElementById('canvas');
if (canvas.getContext){
	var ctx = canvas.getContext('2d');
	drawRoundedRect(ctx, 20, 20, 100, 100, 10);
}

贝塞尔曲线

贝塞尔曲线-百度百科

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，

二阶贝塞尔

原理：AD／AB = BE／BC = DF／DE

语法：

context.quadraticCurveTo(cpx,cpy,x,y);

参数值：

参数	描述
cpx	贝塞尔控制点的 x 坐标
cpy	贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

var canvas = document.getElementById('canvas');
if (canvas.getContext) {
	var ctx = canvas.getContext('2d');

	// 二次贝塞尔曲线
	ctx.beginPath();
	ctx.moveTo(75,25);
	ctx.quadraticCurveTo(25,25,25,62.5);
	ctx.quadraticCurveTo(25,100,50,100);
	ctx.quadraticCurveTo(50,120,30,125);
	ctx.quadraticCurveTo(60,120,65,100);
	ctx.quadraticCurveTo(125,100,125,62.5);
	ctx.quadraticCurveTo(125,25,75,25);
	ctx.stroke();
}

三阶贝塞尔

语法：

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

参数值：

参数	描述
cp1x	第一个贝塞尔控制点的 x 坐标
cp1y	第一个贝塞尔控制点的 y 坐标
cp2x	第二个贝塞尔控制点的 x 坐标
cp2y	第二个贝塞尔控制点的 y 坐标
x	结束点的 x 坐标
y	结束点的 y 坐标

四阶贝塞尔

五阶贝塞尔

Path2D 对象

Path2D用来缓存或记录绘画命令，这样你将能快速地回顾路径。
Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

new Path2D();     // 空的Path对象
new Path2D(path); // 克隆Path对象
new Path2D(d);    // 从SVG建立Path对象

所有的路径方法比如moveTo, rect, arc或quadraticCurveTo等，如我们前面见过的，都可以在Path2D中使用。
Path2D API 添加了 addPath作为将path结合起来的方法。当你想要从几个元素中来创建对象时，这将会很实用。比如：

Path2D.addPath(path [, transform])​

添加了一条路径到当前路径（可能添加了一个变换矩阵）。
Path2D可以使用SVG path data来初始化canvas上的路径。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

var canvas = document.getElementById('canvas');
if (canvas.getContext){
	var ctx = canvas.getContext('2d');

	var rectangle = new Path2D();
	rectangle.rect(10, 10, 50, 50);

	var circle = new Path2D();
	circle.moveTo(125, 35);
	circle.arc(100, 35, 25, 0, 2 * Math.PI);

	ctx.stroke(rectangle);
	ctx.fill(circle);
}