那么90^o  = 90 * PI /180= 0.5 PI; 180^o = PI; 360^o = 2*PI。

下图是一张按照顺时针转动的弧度：

2.2）二次方曲线（quadratic curves）

二次方曲线，也称为抛物线。

维基百科时有关二次方曲线的描述：

https://en.wikipedia.org/wiki/Quadratic_function

Ctx.beginPath(); // 开始画线

Ctx.moveTo(x,y)；// 起点

Ctx.quadraticCurveTo(cx,cy,ex,ey);// 指定要画抛物线

Ctx.lineWidth=12; // 指定线宽带

Ctx.strokeStyle=”black”;// 指定线颜色

Ctx.lineCap=’butt’; // 指定线帽

Ctx.stroke(); // 开始描边

其中quadraticCurveTo（cx,cy,ex,ey）前两个参数表示控制点坐标，后两个参数表示终点坐标。

下面是一个demo:

2.3）三次方曲线（Bezier Curve）

Quadratic curve 有一个控制点，而Bezier curve 有两个控制点。

指定画bezier曲线的方法是：

Ctx.bezierCurveTo(c1x,c1y, c2x, c2y, ex, ey)；

3) Path

在画line,curve时，我们都用beginPath()来表示要启动一条path，然后进行画直线或者曲线。其实可以将他们串连起来。

在多条线串联的地方，称为lineJoin，它有三种形式：

4) 矩形（rectangle）

4.1 绘制矩形

绘制矩形，有两种方式：

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

Ctx.strokeRect(x,y,width, height)；

区别是第一种需要beginPath()，第二种不需要。

4.2 填充矩形

绘制并填充矩形。

Ctx.fillRect(x,y,width, height);

4.3 清理rect

会把指定矩形内的内容全部清空。

Ctx.clearRect(x,y,widht, height);

5) 线条样式

 从图上很容易看出来，butt,round,square的区别来。

2.2、文本

2.1 文本样式

在css中，设置问题的属性有：

然而并不能通过css style设定canvas中文本的样式。

Canvas中的text有自己的一套设置格式：

Ctx.font=”${font-style} ${font-size} ${font-family}” // 指定文本样子，大小，字体

Ctx.fillStyle=”blue” ;// 指定文本颜色

Ctx.textAlign=”center”; // 指定水平方向上的对齐方式

Ctx.textBaseline=”middle” 指定竖直方向上的对齐方式

Ctx.strokeStyle=”blue”; // 指定文本stroke颜色

2.2 填充文本

Ctx.fillText(text, x, y);

在canvas中填充的文本，是不会自动折行的，所以如果文本太长的话，需要自己控制折行显示。

2.3、图像、视频

在canvas加入图像、画布、视频,，使用drawImage即可。在将图像、画布、视频放到canvas时，可以整体放入，也可以剪切后放入。在使用API时，也有三种用法：

假设要添加的图像、画布、视频为源：

1）drawImage(img,x,y);

将源放到canvas的x,y处。

2）drawImage(img,x,y,width,height);

将源放到x,y处，并将源以width,height的尺寸来缩放显示。

3）drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

将源从sx,sy出开始截取swidth,sheight的内容，然后缩放到width,height的尺寸，放到canvas的x,y处。

Image:要使用的图片、画布、视频

Sx,sy:从源的sx,sy坐标处剪切

Swidth,Sheight:源的宽,高

X,y:放到canvas的x位置

2.4、填充样式

在填充时，可以有三种填充方式：

·color 填充为某种颜色

·gradient 填充为渐变颜色

·按pattern进行填充（使用它可以填充图片）

http://www.w3school.com.cn/tags/canvas_fillstyle.asp

3、坐标平移、转换、旋转

默认情况下，坐标原点是在Canvas的左上角。有时我们需要移动坐标轴、或者xy轴转换来进行操作。

3.1 translate 平移

该方法是对坐标平移，不是坐标系。

从效果上，给人的感觉是：在执行完 translate后，坐标轴原点位置由原来的 （0,0）变为原来的(70,70)。之后的作图，就以新的坐标原点为(0,0)。

那么想要再将坐标原点重置，则需要将坐标轴再进行平移。

其实应该这样理解： (x0,y0) 进行一定的运算后成为（x1,y1），然后再进行沿着x,y轴进行平移xt,yt个单位到(x2,y2)

那么上面的代码，fillRect(10,10,100,50)就可以理解为：先在坐标系内以 （10,10）为起点画一个 长 100，宽50的矩形。

那么 矩形的四个角的点是：

(10, 10) , (110, 10),

(10, 60) , (110, 60)

然后对每个点的沿着x轴平移 70，再沿着 y轴平移 70，那么就变成了：

(80,80),(180,80)

(80,130),(180,130)

 用矩阵来表示坐标平移：