Canvas的基本介绍和使用

canvas可以做什么？

做游戏：白鹭引擎、trees……
动画
图表、频谱
画图

HTML5 不止是单纯的 HTML
本身是一个标签<canvas></canvas>，默认是300*150的宽高，本身就具有宽高的属性，不需要使用css去设置
css里面设置的宽高一定要和canvas的宽高一致，否则绘制出来的内容就是变形的

<canvas></canvas>是一个空白的画布
如果希望画布上面有内容，需要通过js来绘制->通过画布的上下文(也类似舞台)进行绘制

使用canvas

1.创建空白画布
2.获得画布的上下文
3.绘制的准备(画笔的宽、颜色、所需的资源)
4.开始绘制

HTMLCanvasElement

var canvasELe=document.getElementById('box');
    //设置全屏
    canvasELe.width = innerWidth;
    canvasELe.height = innerHeight;

方法：
getContext(inDOMString contextID)可以传2d或者experimental-webgl(图形图画处理)

toDataURL()->把canvas对象转成URL->生成带有绘制内容的一个资源链接地址

CanvasRenderingContext2D
提供了绘制、设置绘制内容的方法属性

属性：
fillstyle：设置填充的样式
strokestyle：设置轮廓的样式
linewidth：设置笔画的宽度
Canva：获得画布的DOM元素
lineCap：设置画笔结束位置的形状

方法：
fillRect(x,y,w,h)：绘制矩形的方法
moveTo(x,y)：抬起笔要落到哪个位置
lineTo(x,y)：画线到某个点
stroke(不传||path2D)：绘制
beginPath：标识 要开始一个路径
closePath：标识要结束的路径 闭合开始点和结束点
clearReact()：清除矩形范围之内的内容
createLinearGradient()：线性渐变->canvasGradient
strokeText(text,x,t,maxwidth)：绘制文字
arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制弧线
x,y原点 radius半径，起始和结束的角度，是否是逆时针
bezierCurveTo(参考点1x，参考点1y，参考点2x，参考点2y，终点x，终点y)：绘制贝塞尔曲线
Scale(x,y)：放大缩小 不会影响到画布本身，缩放的是画里面的内容（让画布里面的单位进行缩放）
Save()：保存画布上面之前的样式（画笔宽度、颜色、变形、样式）
Restore()：还原画布上面之前保存的样式
Translate()：以画布的原点(0,0)为参考;
Rotate(angle)：旋转 角度->弧度计算：PI/180*角度->弧度

canvas动画的实现;

1.通过不断地刷新convas里面的内容 实现动画
2.清除上一次canvas里面的内容

CanvasGradient：
设置canvas里面颜色渐变的类
可以通过设置颜色的方式(fillstyle/strokeStyle)去设置渐变的对象
方法：
addColorStop(offset(0-1),color)
可以多次调用