HTML5Canvas
Canvas ->
做游戏：白鹭引擎、trees…
动画
图表、频谱
画图
HTML5 不只是单纯HTML
本身是一个标签 是一个空白的画布 默认是300*150的宽高
本身有宽高的属性不需要使用CSS去设置有宽高的属性
CSS里面设置的宽高 一定要和canvas的宽高设置相同 不然绘制出来的内容就是变形的
是一个空白的画布
如果希望画布上面有内容，需要通过JS来绘制 -> 通过画布的上下文（也类似舞台）进行绘制
使用canvas
创建空白画布 ->HTMLCanvasElement
获得画布的上下文 -> CanvasRenderingContext2D
绘制的准备（画笔的宽、颜色、所需的资源）
开始绘制
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:设置笔画的宽度
lineCap:设置画笔结束位置的形状
Canva:获得画布的DOM元素
方法：
原点：画布的左上角
fillRect(x,y,width,height):绘制矩形的方法
moveTo(x,y) 抬起笔 要落到哪一个位置
lineTo(x,y) 画线到某个点
Stroke(不传||path2D) 绘制
beginPath(): 标识 要开始一个路径
closePath(): 标识 要结束一个路径 会帮咱们闭合 开始点和结束点
clearRect(): 清除矩形范围之内的内容
createLinearGradient(``x0,y0,x1,y1``)``：线性渐变``-> Canvas``Gradient
strokeText(text,x,t,maxWidth)``绘制文字
Arc(x,y,radius,startAngle,endAngle, anticlockwise)``绘制弧线``x,y``原点、``radius``半径、``startAngle,endAngle``起始和结束的角度，是否是逆时针
bezierCurveTo(参考点1X，参考点1y,参考点2x,参考点2y,终点x,终点y) 绘制贝塞尔曲线
Scale(x,y):放大缩小 不会影响到 画布本身，缩放是 画布里面的内容（让画布里面的单位进行缩放）
Save():保存画布上面 之前的样式（笔画宽度、颜色、变形、样式）[1,2]
Restore():还原画布上面 之前的样式 [1,2] restore restore
Translate（）：平移 以画布的原点（0,0）为参考
Rotate(angle):旋转 角度->弧度计算： PI/180*角度 -> 弧度
Canvas动画的实现：
通过不断刷新 canvas里面的内容 实现动画
清除上一次canvas里面的内容
CanvasGradient
设置canvas里面颜色渐变的类
可以通过设置颜色的方式（fillStyle\strokeStyle）去设置渐变对象
方法：
addColorStop(offset(0-1), color)
这个方法可以多次 调用 添加 渐变的颜色值
Canvas ->
做游戏：白鹭引擎、trees…
动画
图表、频谱
画图
HTML5 不只是单纯HTML
本身是一个标签 是一个空白的画布 默认是300*150的宽高
本身有宽高的属性不需要使用CSS去设置有宽高的属性
CSS里面设置的宽高 一定要和canvas的宽高设置相同 不然绘制出来的内容就是变形的
是一个空白的画布
如果希望画布上面有内容，需要通过JS来绘制 -> 通过画布的上下文（也类似舞台）进行绘制
使用canvas
创建空白画布 ->HTMLCanvasElement
获得画布的上下文 -> CanvasRenderingContext2D
绘制的准备（画笔的宽、颜色、所需的资源）
开始绘制
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:设置笔画的宽度
lineCap:设置画笔结束位置的形状
Canva:获得画布的DOM元素
方法：
原点：画布的左上角
fillRect(x,y,width,height):绘制矩形的方法
moveTo(x,y) 抬起笔 要落到哪一个位置
lineTo(x,y) 画线到某个点
Stroke(不传||path2D) 绘制
beginPath(): 标识 要开始一个路径
closePath(): 标识 要结束一个路径 会帮咱们闭合 开始点和结束点
clearRect(): 清除矩形范围之内的内容
createLinearGradient(``x0,y0,x1,y1``)``：线性渐变``-> Canvas``Gradient
strokeText(text,x,t,maxWidth)``绘制文字
Arc(x,y,radius,startAngle,endAngle, anticlockwise)``绘制弧线``x,y``原点、``radius``半径、``startAngle,endAngle``起始和结束的角度，是否是逆时针
bezierCurveTo(参考点1X，参考点1y,参考点2x,参考点2y,终点x,终点y) 绘制贝塞尔曲线
Scale(x,y):放大缩小 不会影响到 画布本身，缩放是 画布里面的内容（让画布里面的单位进行缩放）
Save():保存画布上面 之前的样式（笔画宽度、颜色、变形、样式）[1,2]
Restore():还原画布上面 之前的样式 [1,2] restore restore
Translate（）：平移 以画布的原点（0,0）为参考
Rotate(angle):旋转 角度->弧度计算： PI/180*角度 -> 弧度
Canvas动画的实现：
通过不断刷新 canvas里面的内容 实现动画
清除上一次canvas里面的内容
CanvasGradient
设置canvas里面颜色渐变的类
可以通过设置颜色的方式（fillStyle\strokeStyle）去设置渐变对象
方法：
addColorStop(offset(0-1), color)
这个方法可以多次 调用 添加 渐变的颜色值
雨点打透心脏的1/2处
我会带着你远行
╰+攻爆jí腚メ
还没有评论，来说两句吧...