1. requestAnimationFrame requestAnimationFrame 2. 环绕动画 - 行星运动 环绕动画-行星运动
1. translate 位移 translate位移 2. rotate 旋转 rotate旋转 3. scale 缩放 缩放 4. transform transform
滤镜
（1）绘制文字 绘制文字 （2）绘制渐变的文字 绘制渐变的文字 （3）文字的横向对齐方式 文字的横向对齐方式 （4）文字的纵向对齐方式 文字的纵向对齐方式
1. 绘制图片 绘制图片 2. 动画使用的精灵图素材宽1260，高300，分为7份 动画
2. 贝塞尔曲线Canvas 提供了二阶和三阶的贝塞尔曲线方法：quadraticCurveTobezierCurveTo（1）二阶、三阶贝塞尔曲线 贝塞尔曲线 （2）使用 arcTo 绘制圆弧 arcTo绘制圆弧
Canvas中的曲线分为两种：标准圆弧曲线、贝塞尔曲线1. 标准圆弧曲线（1）弧线 弧线 （2）画一个笑脸 笑脸 （3）椭圆 椭圆 （4）使用fill填充图形 使用fill填充图形 （5）五子棋（5）五子棋 五子棋 游戏开始 （6）阴影 阴影
（1）直线步骤：使用 moveTO 方法把画笔移动到直线起点使用 lineTo 方法把画笔移动到直线终点使用 stroke 方法让画笔绘制线条 直线 （2）折线 折线 （3）lineWidth 设置线条的宽度 lineWidth设置线条的宽度 （4）strokeStyle 修改线条的颜色 strokeStyle修改线条的颜色 （5）线性渐变 线性渐变 （6）径向渐变 径向渐变 （7）锥形渐变 锥形渐变 （8）重复元图像 重复元图像 （9）渐变的折线 渐变的折线 （10）线段转折点的样式 线段转折点的样式
参考 b站 叩丁狼 Canvas 课程（1）通过 html 标签创建 通过html标签创建 （2）通过 js 创建 通过js创建 （3）canvas 宽高的设置 canvas宽高的设置
1. document对象 document对象 2. 元素节点 元素节点 3. 元素的属性和方法 元素的属性和方法 4. 文本节点 文本节点 5. 属性节点 属性节点 6. 事件 事件 点一下 7. 文档的加载 文档的加载 点一下 index.jsconst btn = document.getElementById('btn') console.log(btn)8. DOM的修改 DOM的修改 添加元素 删除元素 替换元素 孙笑川 药水哥 9. XSS注入问题 XSS注入问题 10. 节点的复制 节点的复制 复制节点 孙笑川 药水哥 Giao哥 刘波 11. 修改css样式 修改css样式 修改样式 12. 读取css样式 读取css样式 读取样式 13. 通过属性读取样式 通过属性读取样式 读取样式 14. 事件 事件 15.事件对象 事件对象 点击跳转 16. 事件的冒泡 事件的冒泡 17. 事件委派 事件委派 添加 链接一 链接二 链接三 链接四 18. 事件的捕获 事件的捕获 19. BOM对象 BOM对象 20. Navigator Navigator 21. Location Location 点一下 22. History History 点一下 23. 定时器 定时器 24. 事件循环 事件循环 点一下 消息队列测试