canvas

canvas (图表、动画、画布)

• canvas 最早是由苹果公司推出的
• canvas 本身没有绘画能力，所有绘画都是通过js脚本来实现的。
• canvas默认的宽高是300 * 150
• canvas 可以来绘线条、文本、矩形、圆形等。
• canvas 不能通过行内样式来修改宽高，他有自己的宽高属性。
• canvas初始状态坐标在(0，0)左上角。往右是正的，往下是正的

1.先获取画布，

2.用myCanvas.getContext("2d");获取上下文

3.开启路径

绘制线条

线条方法：

• beginPath(); //开启路径
• closePath(); //关闭路径
• moveTo(x,y);  //设置起始点坐标位置
• lineTo(x,y);  //设置除了起始点之外的点
• stroke()   //描边默认黑色
• fill(); //填充

属性：

描边属性：

• strokeStyle='颜色'  //设置描边的颜色，要在描边颜色属性要放在描边方法之前。
• lineWidth=10 //设置线条宽度，要放在描边方法之前
• lineCap:

butt    默认。向线每个末端添加平直边缘。

round   向线两端添加圆角

lineJoin:round;相交线的圆角

描边属性只对描边有用，对填充没用。

填充属性只对填充有用，对描边没用。

填充属性：

• fillStyle = '颜色';  //默认黑色；

绘制矩形

矩形方法：

• rect(x,y,w,h);        //x,y矩形的宽度和高度，该方法配合stroke()/fill()一起使用
• fillRect(x,y,w,h); //填充矩形 可以直接使用，不需要配合fill()填充方法
• strokeRect(x,y,w,h);//描边矩形，可以直接使用不需要配合stroke()描边方法;
• clearRect(x,y,w,h);//清除矩形，

绘制圆形 

圆形方法：

• arc(x,y,r,sAngle,eAngle,counterclockWise)
• arc(x,y,圆半径，起始角，以弧度计，结束角，以弧度计，顺时针，逆时针 False=顺时针 true = 逆时针) 

绘制文字

文字方法：

• fillText(文字，x，y，maxWidth) //填充文字
• strokeText(文字,x,y,maxwidth) //描边文字

文字属性：

• font="" 复合属性包括大小，字体属性
• textAlign="" 文字的对齐方式
• textBaseline="middle" 上下居中

重新映射画布(0,0)的位置 translate(300,300);

旋转角度是以弧度为单位的如需将角度换为弧度，请使用degrees*Math.pI/180 公式进行计算。 

save() 保存当前环境的状态

restore() 返回之前保存过的路径状态和属性 

渐变 

addColorStop();

• createRadialGradient(x0,y0,r0,x1,y1,r1)
• x0,y0,r0 渐变开始位置
• x1,y1,r1 渐变结束位置