第十五章----canvas

关于此章节，我主要说说canvas的基本用法，及相关的函数式多点随机渲染。（至于WebGL则是另外一种特殊的技术栈了）

一、绘制矩形
描边矩形：ctx.strokeRect()
填充矩形：ctx.fillRect()

二、绘制图形
以下步骤是较为严格的基本绘制图形路径步骤

第一步、获取2D上下文（拿起我们的画笔）

const ctx = canvasNode.getContent('2d')
// 注意哦，不是所有的浏览器都支持canvas，所以最开始要对浏览器进行能力检测
if(canvas.getContent) { code... }

第二步、开启绘画环境（打开绘画小本本）

ctx.beginPath()

第三步、开始临摹图形（我们先画个草稿）

ctx.arc(x, y, radius, startAngle, endAngle, true/false)

x\y：代表圆心
radius：代表半径
startAngle\endAngle：代表开始角度和结束角度
true/false：代表逆时针/顺时针画圆
注意：角度从水平右侧开始；

ctx.arcTo(x1, y1, x2, y2, radius)

x1\y1：代表中间点坐标
x2\y2：代表最后终止点坐标
注意
1、开始点为上次非闭合图形的终止点或moveTo所落坐标点
2、若三点位于一条直线，acrTo不作绘画

ctx.bezierCurveTo(c1x, c1y, c2x, c2y. x, y)

ctx.lineTo(x, y)

x\y：代表最后终止点坐标
注意
1、开始点为上次非闭合图形的终止点或moveTo所落坐标点
2、若两点重合，lineTo不作绘画

ctx.rect(x, y, width, height)

x\y：代表起始坐标
width\height：代表矩形长和宽
注意
1、这虽然同样可以绘制矩形，但是要与canvas对矩形额外独有的两个方法区分strokeRect()和fillRect()

ctx.moveTo(x, y)

x\y：代表重新标注的绘画路径起点位置坐标
注意
moveTo的另外一层功能是，结束同一个绘画环境（beginPath()\closePath()）中上次的闭合绘画路径，并开启新一轮绘画路径绘制。

第四步、定义填充或描边颜色（我们就要为画笔沾色了）

ctx.strokeStyle = 'red'
// 定义描边颜色
ctx.fillStyle = 'red'
// 定义填充颜色

第五步、填充或描边（我们就要开始上色了）

ctx.stroke()
// 描边颜色
ctx.fill()
// 填充颜色

最后一步、关闭绘画环境（合上我们的绘画小本本）

ctx.closePath()

三、绘制文本
一下为一般绘制文本步骤
第一步、文本内容定义填充或描边的颜色

ctx.fillStyle = 'red'
// 填充颜色
ctx.strokeStyle = 'red'
// 描边颜色

第二步、定义文本样式

ctx.font = 'bold 56px Arial'

注意：当没有声明字体时，其他属性值失效

ctx.textAlign = 'strat'
// 文本对齐方式

ctx.textBaseline = 'top'
// 文本基线

第三步、填充或描边具体文本内容并定位其位置坐标

ctx.fillText(textValue, x, y)
// 声明所填充文本内容及位置坐标
ctx.strokeText(textValue, x, y)
// 声明所描边文本内容及位置坐标

四、变换

ctx.translate(x, y)
// 画布基点变化

注意：
1、画布初始基点位于0, 0
2、此基点变化只针对其声明后的会话动作

ctx,rotate(angle)
// 画布以基点为原点旋转

注意：
1、顺时针方向为正方向
2、此按基点为原点旋转只针对其声明后的会话动作

ctx.fillStyle = 'red'
ctx.translate(100, 100)
ctx.save()
// 储存相关属性值及画布特性
ctx.restore()
// 取出ctx.save()所储存数据

注意：
1、ctx.save()所储存的相关属性值及画布特性会在内存形成一个类似栈的区域
2、取出顺序同栈相同，先进后出
3、ctx.restore()表示取出ctx.save()所储存数据

总结，若是要设计多彩的复杂图形，那就要利用数学建模来寻找规律，在通过一个一个像素去绘制（ctx.fillRect(x, y, 1,1)），在此我就贴下我的日常demo地址

部分截图：