🎍0、前言

1. 🎅🎅前几天小师妹突然火急火燎的的给我打电话说她在校招面试前端的时候，多次被提问到canvas,但是她却不会，希望我能给她速成一下！可见canvas在前端的地已经越来越重要了!🎅🎅

2. 🔆🔆所以我特地熬夜写了本文 【附带2个小项目】，就为了让大家能快速掌握canvas（我的心里只有你们，没有小师妹）~🔆🔆

3. 👙👙我会尽量把技术文写的通俗易懂/生动有趣，保证每一个想要学习知识&&认认真真读完本文的读者们能够有所获，有所得。当然，如果你读完感觉本文写的还可以，真正学习到了东西，希望给我个「 赞 」 和 「 收藏 」，这个对我很重要，谢谢了！👙👙

?

?

💎目录

• 🎍0、前言
• 👝1.初级阶段——师傅领进门~
• • 🎣（1）canvas是什么？
  • 🍶（2）如何使用？
  • ??第一步：在HTML5页面创建canvas元素；
  • ??第二步：通过JavaScript来绘制。
  • • 1??创建 Canvas 元素：
    • 2??通过 JavaScript 来绘制：
    • 3??实现效果：
• 🚧2.中级阶段——绘制一些常见的基本图形~
• • 🚓（1）绘制一条直线
  • • 1??上代码：
    • 2??实现效果：
  • 🚑（2）绘制一条折线
  • • 1??上代码：
    • 2??实现效果：
  • 🚔（3）画矩形和圆
  • • 1??上代码：
    • 2??实现效果：
  • 🚐（4）颜色渐变之线性渐变和发散渐变
  • • 1??上代码：
    • 2??实现效果：
  • 🚉拓展——几种复杂图形的绘制
  • • 1??上代码：
    • 2??实现效果：
• 👝3.高级阶段——两个小项目助你玩透canvas~
• • 🏆（1）项目一：实现橡皮擦
  • • 1??难点：如何清除canvas画布上指定区域：
    • • ??难点解决——代码实现：
      • ??难点解决——实现效果：
    • 2??项目——代码实现：
    • 3??项目——实现效果：
  • 🔮（1）项目二：实现刮刮乐
  • • 1??难点①：如何在canvas画布上平铺指定图片：
    • • ??难点解决——代码实现：
      • ??难点解决——实现效果：
    • 1??难点②：如何在canvas画布上绘制文本 （实心文本＋空心文本）：
    • • ??难点解决——代码实现：
      • ??难点解决——实现效果：
    • 2??项目——代码实现：
    • 3??项目——实现效果：
• 🔆4.In The End——心灵鸡汤送上~