Appearance
title: 如何使用 Canvas 制作出炫酷的网页背景特效
简介
从零开始学习 Canvas 相关知识，分析其特效，最终制作出炫酷的网页背景
说明
小册简介
你可能会看到这样的效果：
又或者这样的：
还可能是这样的：
笔者博客地址：cherryblog.site ٩(๑>◡<๑)۶
你是不是被上面几个例子中的背景所吸引，很好奇这些背景是怎么实现的？是否也想让自己的个人网站有同样炫酷且与众不同的背景呢？
本小册将会帮你解答这个问题：如何使用 Canvas 制作出炫酷的网页背景特效。
你可能好奇这种效果是怎么做到的呢？其实答案很简单，就是 HTML5 的新标签 —— Canvas。
Canvas 自 HTML5 发布以来就受到了广泛的关注，但却很少在项目中使用，所以大部分前端攻城狮都只是知道，很少实践。
本小册将带你进入 Canvas 的世界，为你展示 30+ 个 Canvas 项目，你会惊叹于 Canvas 所制作出的神奇效果。
同时会带大家从零开始学习 Canvas：从零开始，教你绘制出基本图形。通过组合这些基本图形，将产生不可思议的化学反应~
在入门了 Canvas 之后，将带大家分析那些可以作为背景的 Canvas 炫酷特效，总结出这些炫酷特效都有哪些特点。日后这些就是你的思想武器。掌握了这些规律，你就相当于站在了巨人的肩膀上，再制作炫酷的网页背景特效将会事半功倍。
在了解了这些特点之后，我们将通过一个具体的案例来一起实现一下这些特效。
最终， Canvas 基础知识 + 特效特点 + 你丰富的想象力 = 属于你自己的炫酷网页背景特效。
划重点：本小册的所有特效，都会将源码分享给大家~ (｡♥‿♥｡)
你会学到什么？
- 了解基本的 Canvas API
- 使用 Canvas 绘制基本图形和特效
- 了解 Canvas 常见特效的“套路”
- 制作出属于你自己的 Canvas 背景特效
你应该已经了解什么？
- 一定的前端基础（包括但不限于 HTML5、CSS3、JavaScript）；
- 一丢丢的数学知识（高数能及格的水平就好）~
你需要准备什么？
- 一台电脑
- 一颗认真学习的心
- 一杯咖啡
购买须知
- 本小册为图文形式内容服务，共计 9 节，上线时间为 2017 年 11 月 22 日；
- 购买用户可享有小册永久的阅读权限；
- 购买用户可进入小册微信群，与作者互动；
- 掘金小册为虚拟内容服务，一经购买成功概不退款；
- 掘金小册版权归北京北比信息技术有限公司所有，任何机构、媒体、网站或个人未经本网协议授权不得转载、链接、转贴或以其他方式复制发布/发表，违者将依法追究责任；
- 在掘金小册阅读过程中，如有任何问题，请邮件联系 xiaoce@xitu.io