输出内容才能更好的理解输入的知识
前言🎀
如果你想深入图形、可视化等领域，那么肯定离不开 canvas、webgl、three.js 等一系列技术。在这众多技术中，选择canvas2d为基础来入门是一个不错的选择。
canvas在动画、可视化、图片处理等领域有着出人意料的表现，是十分值得学习的一门技术。例如echarts就是通过canvas和svg实现的。
希望通过这篇文章记录Canvas基本的用法和场景，并拓展自己的前端视野。
如果觉得有收获还望大家点赞、收藏🌹
案例
先来看几个案例，你可能就对canvas的应用场景有所了解，也会对它产生兴趣。
当然有些案例不使用canvas一样能实现，但在都能实现目标的情况下如果canvas效果更好或者更方便，那么还是建议大家尝试下canvas的~
点击小球很简单的一个小球动画，能衍生出许多东西，我为什么想到了合成大西瓜hhhh
截图还有很多额外操作，如滤镜、调色等就像P图一样。略微修改一下还能当放大镜使用
粒子爆炸****particle还有特别多场景如 画板、图片水印、视频、进度条、粒子动画…都有很好的效果，但没有研究就不详述了，欢迎了解的同学补充。
Canvas
首先我们学习如何创建canvas元素并获取操作对象
创建画布
是一个可以_使用脚本 (通常为JavaScript) 来绘制图形的 HTML 元素_ 。例如，它可以用于绘制图表、制作图片构图或者制作简单的动画。
<html>....<canvas id="canvas" width="300" height="300"></canvas>....
</html>
这样就在页面上创建了一个canvas画布，需要注意的是canvas元素自身_只有两个属性 width和height_，都只接受数字为属性值，无需设置单位，默认单位为像素。
如果通过css来定义大小，绘制时图像会伸缩以适应框架的尺寸，如果css的尺寸与初始画布比例不一样，内容就容易出现拉伸。
直线被拉粗
获取上下文
元素创造了一个固定大小的画布，它公开了一个或多个_渲染上下文_，其可以用来绘制和处理要展示的内容。我们进行操作时先根据需要获取渲染上下文，然后在它上面绘制。
这个过程就像我们在进行绘画之前选择了一只画笔。
<script>....// 获取canvas对象const canvas = document.getElementById('canvas')// 获取渲染上下文对象const ctx = canvas.getContext('2d')...
</script>
本文主要了解2D渲染上下文，canvas也支持如WebGL的3D上下文，更多详情 MDN-Canvas
Canvas API
在创建完canvas画布并获取到渲染上下文拿到画笔后，我们可以看看canvas支持了哪些操作。
以下内容主要总结自MDN-Canvas-API与部分使用经验，适当精简。如果对具体细节有疑惑的同学可以查看官方文档或评论区交流。
栅格
通常canvas元素默认被_网格覆盖_，一个网格单元相当于canvas元素中的一像素。所有元素都相对于原点(0, 0)定位，图中蓝色正方形距离Y轴x像素，距离X轴y像素，所以坐标为(x, y)。 
绘制图形
先学习简单的如何绘制直线、矩形、三角形和圆形等。但在绘制前需要掌握路径，它是图形形成的基础。
路径 Path
图形的基本元素是 路径 。路径 是通过不同颜色和宽度的线段或曲线相连形成的不同形状的_点的集合_。一个路径，甚至一个子路径，都是_闭合的_。
主要使用以下四个函数：
1.beginPath _新建_一条路径，生成之后，图形绘制命令被指向到路径上生成路径。
2.closePath _闭合_路径之后图形绘制命令又重新指向到上下文中。
3.stroke 通过_线条_来绘制图形轮廓。
4.fill 通过填充路径的内容区域生成_实心_的图形。
生成路径主要有三个步骤：
1.调用 beginPath() 清空重置路径和子路径列表，以重新绘制图形。
2.调用 目标函数 绘制路径。
3.非必需，调用 closePath() 绘制一条从当前点到开始点的直线来闭合图形。
如果不按照规定步骤来绘制路径可能会导致意外的结果我们通过绘制圆弧的案例来观察（arc函数用于绘制圆和圆弧等图形）
移动笔触 moveTo
每次绘制总是从一个点开始再到另一个点结束，可以想象一下我们在纸上移动画笔的过程。
而canvas则提供了一个 moveTo函数 让我们在“画布”上“移动”自己画笔的位置（并不是作画，而是设置起始点）。
moveTo(x, y)：将笔触移动到指定的坐标 x 以及 y 上
直线 lineTo
直线也是图形的一种，学习了路径和移动笔触后再来看如何绘制出一条直线主要使用 lineTo(x, y) 函数，绘制一条_从当前位置到指定x以及y位置的直线_
<script>....ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(200, 50)ctx.closePath()ctx.stroke()
</script>
三角形 triangle
三角形可以理解为三条直线连接在一起，
<script>....ctx.moveTo(50, 50)ctx.lineTo(100, 50)ctx.lineTo(100, 100)ctx.lineTo(50, 50)ctx.stroke()
</script>
也可以是一次路径绘制上的两条直线通过闭合连接头尾 
<script>....ctx.beginPath()ctx.moveTo(50, 50)ctx.lineTo(100, 50)
最低0.47元/天 解锁文章
3962
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
