关于此章节,我主要说说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地址
部分截图: