canvas介绍及API

绘制矩形

fillRect(x,y,width,height)

绘制一个填充的矩形

strokeRect(x,y,width,height)

绘制一个矩形的边框

clearRect(x,y,width,height)

清除制定矩形区域，让清除部分完全透明

上述中参数（x,y）指定了在画布上矩形的左上角（相对于原点）的坐标，width和height设置矩形的尺寸

---

绘制路径

1.首先，你需要创建路径起始点。

2.然后你使用画图命令去画出路径。

3.之后你把路径封闭。

4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

注意：当前路径为空，即调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（），无论最后的是什么。出于这个原因，你几乎总是要在设置路径之后专门指定你的起始位置。

moveTo(x,y)

将笔触移动到指定的坐标x以及y上。

lineTo(x, y)

绘制一条从当前位置到指定x以及y位置的直线。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

---

绘制圆或圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

注意：arc()函数中的角度单位是弧度，不是度数。角度与弧度的js表达式:radians=(Math.PI/180)*degrees。

arcTo(x1, y1, x2, y2, radius)   // 用的不多

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

---

二次贝塞尔曲线及三次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)

绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

---

Path2D对象

Path2D()

Path2D()会返回一个新初始化的Path2D对象（可能将某一个路径作为变量——创建一个它的副本，或者将一个包含SVG path数据的字符串作为变量）。

newPath2D();// 空的Path对象

newPath2D(path);// 克隆Path对象

newPath2D(d);// 从SVG建立Path对象

Path2D.addPath(path [, transform])​

添加了一条路径到当前路径（可能添加了一个变换矩阵）。

示例

function draw(){

             var canvas = document.getElementById("canvas");

             if(canvas.getContext){

                   var ctx = canvas.getContext('2d');

                   var rectangle = new Path2D(); // 创建Path2D对象

                   rectangle.rect(10,10,50,50);

                    var circle= new Path2D(); // 创建Path2D对象

                    circle.moveTo(125,35);

                    circle.arc(100,35,25,0,2*Math.PI)

                    ctx.stroke(rectangle);

                    ctx.fill(circle);

               }

}