Canvas

Canvas画布（拓展资料https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage）

• 做游戏：（白鹭引擎）、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. canvas对象转URL - >生成带有绘制内容的一个资源链接地址

toDateURL()

CanvasRenderingContext2D

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

属性：

fillStyle：设置填充的样式

strokeStyle：设置轮廓的样式

lineWidth：设置笔画的宽度

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

Canvas：获得画布的DOM元素

方法：

原点：画布的左上角

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

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

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

stroke(不传||Path2D)：绘制   Path2D是绘制的路径

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

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

clearRect()：清除矩形范围之内的内容

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

strokeText(Text,x,t,maxWidth)： 绘制文字

Arc（x,y,radius,startAngle,endAngle,anticlockwise）： 绘制弧线 x，y原点，radius半径、startAngle，endAngle起始和结束的角度，是否是逆时针；

bezarCurveTo（参考点1的x轴，点1y，2x，2y，终点）：绘制贝塞尔曲线；

Canvas动画的实现：

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

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

CanvasGradient

设置canvas里面颜色渐变的类

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

addColorStop（offset（0-1），color）

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