cavans笔记
var canvas = document.getElementById('tutorial');
1、ctx=canvas.getContent('2d');//用来获得渲染上下文和它的绘画功能
2、ctx.globalAlpha = 0.2; //透明度设置
3、ctx.strokeStyle = "rgba(255,0,0,0.5)"; //边框的颜色
4、ctx.fillStyle = "rgba(255,0,0,0.5)";//填充样式
5、lineWidth=2 //线条宽度
6、lineCap =type //设置 线条末端样式 butt：平行，round：圆角（多出半圆的长度） 和 square：加上 线宽一半高的矩形
7、lineJoin =type //设定线条与线条间接合处的样式。round：圆角, bevel：平角 和 miter：直线
8、miterLimit = value // 限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度。交点锯齿的起伏
9、getLineDash() //返回一个包含当前虚线样式，长度为非负偶数的数组。
10、setLineDash(segments) //设置当前虚线的样式
11、lineDashOffset = value //设置虚线样式的起始偏移量
12、createLinearGradient(x1, y1, x2, y2) 渐变
13、shadowOffsetX = float//shadowOffsetX 和 shadowOffsetY 用来设定阴影在 X 和 Y 轴的延伸距离，它们是不受变换矩阵所影响的。负值表示阴影会往上或左延伸，正值则表示会往下或右延伸，它们默认都为 0
14、shadowOffsetY = float
15、shadowBlur = float //shadowBlur 用于设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为 0
16、shadowColor = color //shadowColor = color
17、save() restore() //save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照
18、ctx.translate(100,0); //平移
19、ctx.scale(0.75,0.75); //缩放
20、ctx.rotate(angle) //偏移角度
21、transform(m11, m12, m21, m22, dx, dy)
m11：水平方向的缩放
m12：水平方向的偏移
m21：竖直方向的偏移
m22：竖直方向的缩放
dx：水平方向的移动
dy：竖直方向的移动
m11 m21 dx
m12 m22 dy
0 0 1
22、setTransform(m11, m12, m21, m22, dx, dy) //设置矩阵
23、ctx.setTransform(1, 0, 0, 1, 0, 0); 重置当前变形为单位矩
24、
（1）、基本用法
<canvas id='tutorial' width='150' height='150'></canvas>
var canvas = document.getElementById('tutorial');
var ctx = vanvas.getContext('2d');
//检查支持性
if(canvas.getContext){
var ctx= canvas.getContent('2d');
}else{
console.log("该浏览器不支持canvas")
}
（2）、绘制形状
canvas提供了三种方法绘制矩形：
fiilRect(x,y,width,height) //绘制一个填充矩形
strokeRect(x,y,width,heigth) //绘制一个矩形边框
clearRect(x,y,width,height) //清除指定矩形区域，让清除部分完全透明 （canvas 部分清除颜色）
绘制路径
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 *****不管是直线还是圆形线 都要调用这个方法
closePath() 闭合路劲之后图形绘制命令又重新指向到上下文中。 *****每次绘制一段路劲的完成时都要调用此方法，然后重新绘制的时候在调用beginPath();
fill() 通过填充路径的内容区域生成实心的图形
stroke() 通过线条来绘制图形轮廓
fill() stroke() 两个方法的区别是一个是轮廓一个是 填充
线 line
moveTo(x,y) 起点 每次绘制只有一个
lineTo(x,y) 终点 可以有多个
圆弧 arc
// x y 圆心 radius：半径 startAngle：起始点 0*Math.PI endAngle：终点 0*Math.PI
arc(x, y, radius, startAngle, endAngle, anticlockwise)
//
arcTo(x1, y1, x2, y2, radius)
（3）、渐变
var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0,'white');
lineargradient.addColorStop(1,'black');
ctx.fillStyle = lineargradient
