为了让师妹 20 分钟学会 canvas，我熬夜苦肝本文外加一个小项目【❤️建议收藏❤️】
🎍0、前言
🎅🎅前几天小师妹突然火急火燎的的给我打电话说她在校招面试前端的时候，多次被提问到 canvas,但是她却不会，希望我能给她速成一下！可见 canvas 在前端的地已经越来越重要了!🎅🎅
🔆🔆所以我特地熬夜写了本文，就为了让大家能快速掌握 canvas（我的心里只有你们，没有小师妹）~🔆🔆
👙👙我会尽量把技术文写的通俗易懂/生动有趣，保证每一个想要学习知识 &&认认真真读完本文的读者们能够有所获，有所得。当然，如果你读完感觉本文写的还可以，真正学习到了东西，希望给我个「 赞 」 和 「 收藏 」，这个对我很重要，谢谢了！👙👙
👝1.初级阶段——师傅领进门~
🎣（1）canvas 是什么？
我们翻译一下这个单词，会发现它有「 画布 」的意思。画布画布不就是绘制图形的么？不过不同的是 canvas 元素是在网页上绘制图形！
其实 canvas 元素就是使用 JavaScript 在网页上绘制图像。而绘制的画布区域是一个矩形区域，我们可以控制其中每一像素，以达到想画啥就画啥的效果。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
🍶（2）如何使用？
上面说 canvas 元素就是使用 JavaScript 在网页上绘制图像！所以关于 canvas 的使用也分为两步：
第一步：在 HTML5 页面创建 canvas 元素；
第二步：通过 JavaScript 来绘制。
1️⃣创建 Canvas 元素：
向 HTML5 页面添加 canvas 元素!规定此 canvas 元素的 id、宽度和高度（宽度和高度即指定画布的大小！）：
2️⃣通过 JavaScript 来绘制：
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内完成：
3️⃣实现效果：
需要注意的是：canvas 的画布区域，左上角为坐标原点(0,0)，分别向右为 x 轴，向下为 y 轴。
🚧2.中级阶段——绘制一些常见的基本图形~
要知道，再复杂的图形也都是由各种基本图形组合而成。
所以，先来看看如何绘制各种常见的基本图形。
这样，进行一些需要使用 canvas 的项目设计时才会手到擒来！
🚓（1）绘制一条直线
指定起始(x,y)坐标；
指定粗细；
指定颜色。
注意：通过 CSS 定位到 canvas 元素，并为其设置一个显眼的 border 样式，方便下面观察！
1️⃣上代码：
2️⃣实现效果：
🚑（2）绘制一条折线
指定折点处的形状；
指定线端点的形状。
1️⃣上代码：
认真学习的小伙伴们可以尝试将 lineCap 和 lineJoin 的值多次更改，看看各种值的真实实现效果哦！
2️⃣实现效果：
🚔（3）画矩形和圆
分别尝试画实心和空心！
同一张画图上绘制多个图形小知识点：
在同一个 canvas 上，即同一张画布上画图时，画笔的位置为画笔画完上一个图的结束点！
问题就是重新定位画笔过于麻烦！
解决方法——所以在一个图画完后使用.stroke()方法绘制出此图；并使用方法.beginPath()新开辟一次画图，重新定位画笔即可！
1️⃣上代码：
2️⃣实现效果：
🚐（4）颜色渐变之线性渐变和发散渐变
渐变可以填充在矩形, 圆形, 线条, 文本等各种形状中，主要作用是：可以自己定义不同的颜色。
1️⃣上代码：
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是 0 至 1。使用渐变，设置 fillStyle 或 strokeStyle 的值为渐变，然后绘制形状，如矩形，文本，或一条线。
2️⃣实现效果：
🚉拓展——几种复杂图形的绘制
题目就是下面所列的五个，请小伙伴们发挥你们的小脑袋瓜，自己先动手绘制哦🙄！
所用的操作在上面都已详细讲解，没有一道题超纲哦（实践是检验真理的唯一标准🤩）
做完的小伙伴们可以看看下面我的代码和实现的效果，说不定你们做的比我的还要好😂！
使用红色填充的五角星；
使用渐变色填充的六边形；
机器人头部（使用线性渐变 &&发散渐变）；
空心的五角星；
绘制一个四肢健全的小人。
1️⃣上代码：
2️⃣实现效果：
👝3.高级阶段——一个小项目助你玩透 canvas~
🏆（1）实现橡皮擦
1️⃣难点：如何清除 canvas 画布上指定区域：
使用 clearRect() 方法清空指定矩形区域。
JavaScript 语法： context.clearRect(x,y,width,height)
⚠️难点解决——代码实现：
⚠️难点解决——实现效果：
2️⃣项目——代码实现：
实现效果——实现橡皮擦，即鼠标点下去移动所经过位置擦除，鼠标松开不清除。
本项目实现时需要注意的是：
在监听 canvas 的 onmousemove 事件(鼠标移动事件)时：
c.onmousemove = function(e){ e.clientX; e.pageX; c.offsetLeft; }
关于获取到的关于鼠标移动信息的几个量 e.clientX; e.pageX;和 c.offsetLeft;都不能直接作为判断鼠标点击处区域的清除：
第一个原因是：上述几个量各自代表的含义如下：（它们的含义决定它们不是鼠标相对于 canvas 的真实坐标！）
e.clientX 是鼠标距离网页窗口左边缘的距离 所以不能作为定位鼠标位置的量，因为窗口可以上下左右滑动，画布位置相对于窗口会变；
e.pageX 是鼠标距离网页内容左边缘的距离；
c.offsetLeft 是 canvas 相对于浏览器左边的距离
所以我们通过组合使用 e.pageX 和 c.offsetLeft 即可实现鼠标真实坐标的定位。在此要理解一个点是：canvas 画布的坐标轴并不是直接与网页的坐标轴重合！所以才会有 e.pageX（以网页的坐标轴为参考系）和 c.offsetLeft（以 canvas 画布的坐标系为参考系）两种量。而我们只需要使用 e.pageX-c.offsetLeft（理解为将 canvas 画布的坐标轴向左上网页的坐标轴平移直至重合）即可定位到鼠标的真实坐标。
第二个原因是：context.clearRect(x,y,w,h);方法清除的是指定坐标(x,y)，宽 w，高 h 的矩形区域。
注意：这个宽是指以(x,y)坐标向右 x 轴的长度；这个高是指以(x,y)坐标向下 y 轴的长度。所以我们定位到的鼠标坐标应该在 x 轴和 y 轴同时向左上 canvas 画布的原点处移动 w/2 和 h/2 个像素长。即 e.pageX-c.offsetLeft - w/2，这就是清除区域的 x 坐标的推理过程。y 坐标类似，小伙伴们自己多加思考哦！
3️⃣项目——实现效果：
自己跟着步骤做就可以看到效果啦~
🔆4.In The End——心灵鸡汤送上~
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！
本博主会持续更新爬虫基础分栏及爬虫实战分栏，认真仔细看完本文的小伙伴们，可以点赞收藏并评论出你们的读后感。并可关注本博主，在今后的日子里阅读更多爬虫文！
如有错误或者言语不恰当的地方可在评论区指出，谢谢！如转载此文请联系我征得本人同意，并标注出处及本博主名，谢谢 ！
版权声明: 本文为 InfoQ 作者【孤寒者】的原创文章。
原文链接:【http://xie.infoq.cn/article/1ad952e8637045841975e977e】。文章转载请联系作者。
同名微信公众号【孤寒者】 2021.11.09 加入
HDZ核心组成员 华为云享专家、Python全栈领域博主 CSDN原力计划作者、CSDN全栈领域优质创作者 专注分享Python领域原创系列文章，如Python爬虫、Django、tornado、flask等。
评论