Canvas

相关资料：

• Canvas API：MDN canvas 入门教程
• 如何使用 Canvas 制作出炫酷的网页背景特效： canvas 入门教程
• The HTML5 Canvas Handbook：canvas api 手册

Canvas 的入门，看前面提供的两个入门教程资料就已经足够了。后面的例子都是《如何使用 Canvas 制作出炫酷的网页背景特效》这个 canvas 教程的例子，我都用 codePen 实现了一遍，我会在代码中关键的地方加上注释，这些 demo 我都会一一列举出来。

详细的 API 解释我就不多赘述了，因为这些东西在上面提供的资料中都有，没什么必要做重复的事情。

Canvas 绘制图像的步骤：

1. 使用 beginPath() 开始一个路径
2. 绘制路径
3. 使用 closePath() 关闭一个路径
4. 设置填充颜色或描边颜色
5. 填充颜色或描边

CodePen demo

下面的 code demo 为 《如何使用 canvas 制作出炫酷的网站背景特效》中所涉及到的例子

• canvas 画实心圆
• canvas 画圆弧
• canvas 画直线
• canvas 画多条直线
• canvas 给直线添加样式
• canvas 画矩形
• canvas 设置阴影
• canvas 渐变效果 1
• canvas 渐变效果 2
• canvas 缩放

• canvas 图形旋转

• canvas 白板写字