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)：
4000
抬起笔要落到哪个位置

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)

可以多次调用