canvas画布

canvas画图的基础：

1.替代内容,如果浏览器不支持的话<canvasid="myCanvas">替代内容</canvas>

2.画图环境

①canvas.getContext("2d")

②getContext方法会返回一个对象，这个对象给我们封装了很多的绘图方法和属性。但是他只给我们提供2d的画图环境。

3.坐标系统

Canvas坐标系是一个二维的平面。原点坐标(0,0)在Canvas画布的左上角位置上，沿着水平方向向右是X轴正方向，垂直方向向下是Y轴正方向

canvas画矩形

①rect() 创建矩形

②fillRect(x,y,width,height)绘制“被填充”的矩形

③strokeRect(x,y,width,height)绘制矩形（无填充)

线性渐变和放射性渐变

线性渐变: context.createLinearGradient(x0,y0,x1,y1)

放射性渐变:context.createRadialGradient(x0,y0,r0,x1,y1,r1);

渐变填充与重复

var grd=ctx.createLinearGradient(x0,y0,x1,y1);

grd.addColorStop(stop,color);

stop	介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

color

在结束位置显示的 CSS 颜色值

路径

路径由多个或者一个直线或者曲线组成,或者是计算出来的图形，路径是canvas绘图的基础

fill()	填充当前绘图（路径）
stroke()	绘制已定义的路径
beginPath()	起始一条路径，或重置当前路径
moveTo()	把路径移动到画布中的指定点，不创建线条
closePath()	创建从当前点回到起始点的路径
lineTo()	添加一个新点，然后在画布中创建从该点到最后指定点的线条

arc 方法

arc(x,y, radius, startAngle, endAngle, anticlockwise)该方法用于创建圆和部分圆接受五个参数：

1、x，y 是圆心坐标； 

2、radius 是半径； 
3、startAngle是起弧度（以 x 轴为基准）； 
4、endAngle 是末弧度（以 x 轴为基准）； 
5、anticlockwise 为 true 表示逆时针，反之顺时针。