canvas

Canvas画布

做游戏：（白鹭引擎）、trees等

动画

图标、频谱

画图

html5不只是单纯的HTML

canvas：

1.本身是一个标签<canvas></canvas>是一个空白的画布，默认是300*150的宽高；

2.本身有宽高的属性，不需要使用CSS去设置；

注意：CSS里面设置的宽高，一定要和canvas的宽高设置相同，不然绘制出来的内容是变形的；

canvas本身是一个空白的画布，如果希望画布上面有内容，需要通过JS来绘制 ->通过画布的上下文（类似于舞台）进行绘制；

使用Canvas

1）创建空白画图

2）获得画布的上下文

3）绘制的准备（画笔的宽、颜色、所需的资源等样式内容）

4）开始绘制

HTMLCanvasElement

varcanvasEle=document.getElementById('box');

canvasEle.width=innerWidth;

canvasEle.height=innerHeight;

方法：

1)getContext（inDOMString contextId）可以传2D或者experimental-webgl（图形图像处理）

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

CanvasRenderingContext2D

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

属性：

fillStyle：设置填充的样式

strokeStyle：设置轮廓的样式

lineWidth：设置笔画的宽度

lineCap：设置画笔结束位置的形状

Canvas：获得画布的DOM元素

方法：

原点：画布的左上角

fillRect(x,y,width,height):绘制矩形fillRect（） 绘制矩形x y width height

moveTo(x,y):抬起笔 要落到哪个位置

lineTo（x,y）：画线到某个点

stroke（不传||Path）：绘制 Path2D是绘制的路径

beginPath（）：标识 要开始的路径

closePath（）：标识 要结束的路径 会自动闭合

clearRect（）：清除矩形范围之内的内容

createLinearGradient(x0,y0,x1,y1):线性渐变--》CanvasGradient

strokeText(text,x,t,maxWidth):绘制文字

arc（x,y,radius,startAngle,endAngle,anticlockwise）:绘制弧线

arc的参数：

x,y:原点

radius：半径

startAngle,endAngle：起始和结束的角度，是否是逆时针

bezierCurveTo（cp1x,cp1y,cp2x,cp2y,x,y);

bezierCurveTo的参数：

cp1x：参考点1x

cp1y：参考点1y

cp2x：参考点2x

cp2y：参考点2y

x：

y：

Canvas动画的实现：

1.通过不断刷新 canvas 里面的内容 实现动画

2.清除上次 canvas 里面的内容

CanvasGradient

设置canvas 里面 颜色渐变的类

可以通过 设置颜色的方式（fillStyle/strokeStyle)去设置 渐变对象

方法：

addColorStop(lffset(0-1),color)

这个方法可以多次调用添加渐变的颜色值