H5Api-canvas(画布)

H5Api-canvas（画布）

canvas：在页面上规划出一块空间，canvas标签，通过JavaScript控制画布完成绘制
使用：
1.获取画布
var canvas=document.getElementById("");
2.获取画笔
var cx=canvas.getContest(“2d”);
3.设置画笔样式
cx.fillStyle=‘yellow’;
4.开始绘制
可以绘制各种图形，比如
矩形：
fillRect(x,y,w,h); 这个是实心填充矩形
strokeRect(x,y,w,h); 这个是描边的矩形
x,y: 当前矩形开始绘制的位置坐标
w,h: 当前举行的宽高
圆形：
cx.beginPath();
cx.arc(x,y,r,begin,end,c); 设置圆
x,y: 圆的圆心坐标
r: 圆的半径
begin，end:开始角度和结束角度；Math.PI=180
Math.PI/180=1度
c：是否按照逆时针进行绘制
true：按照逆时针
false：顺时针
线段：
moveTo(x,y):
x,y:线段的起点坐标
lineTo(x,y)
x,y:线段的终点坐标
cx.stroke();
//fill():不能使用
lineWidth=number;
渐变图形
线性渐变：
var g=createLinearGradient(bx,by,ex,ey):
bx,by:渐变的开始位置坐标
ex,ey:渐变结束位置的坐标
g.addColorStop(offset,color);
offset:0-1之间的偏移量
color：设置的颜色值
当前方法至少调用两次
cx.fillStyle=g;
//绘制图形
径向渐变：
createRadialGradient(bx,by,br,ex,ey,er)
bx,by:开始圆的圆心位置
br:开始圆的半径
ex,ey:结束圆的圆心位置
er：结束圆的半径
变形
1.平移
translate(x,y):
x,y:将坐标原点平移单位
2.扩大
scale(x,y):
x:代表的是水平方向上的放大倍数
y：代表的是垂直方向上的放大倍数（如果想要缩小，参数设置为0-1之间的值）
放大坐标
3.旋转
rotate(angle):
angle:旋转角度，旋转的中心点就是坐标轴的原点
默认按照顺时针进行旋转，想要进行逆时针旋转，角度设置为负数即可
4.保存和回滚
[save1,save2,save3]
save():将当前的绘画状态进行保存并存入状态栈
restore():该方法每次调用只会回滚到上一次save的状态