canvas

1. 自学 Canvas 时的一些参考资料

• 0056. canvas 在线学习 - 菜鸟教程
  • 1. 📝 简介
  • 2. 🔗 links
• 0052. canvas 在线学习 - 掘金
  • 1. 📝 简介
  • 2. 🔗 links
• 0053. canvas 在线学习 - html5canvas tutorials
  • 1. 📝 简介
  • 2. 🔗 links
• 0054. canvas 在线学习 - MDN Canvas tutorial
  • 1. 📝 简介
  • 2. 🔗 links
• 0055. canvas 在线学习 - HTML Canvas Deep Dive
  • 1. 📝 简介
  • 2. 🔗 links

2. 基本概念

• 0001. 认识 canvas 标签
  • 1. 📝 简介
  • 2. 📒 canvas 概述
  • 3. 📒 canvas 基本使用
  • 4. 📒 canvas 基本特性
  • 5. 📒 canvas 应用场景
    • 5.1. 游戏开发
    • 5.2. 图形处理
    • 5.3. 数据可视化
    • 5.4. 实时视频处理
    • 5.5. 自定义绘图
    • 5.6. 教育和模拟
  • 6. 📒 对比 svg 和 canvas
    • 6.1. 对比表格
    • 6.2. 对比 svg 和 canvas
  • 7. 🤖 对比 svg 和 canvas
    • 7.1. 图形类型
    • 7.2. DOM 交互
    • 7.3. 性能
    • 7.4. 可访问性和SEO
    • 7.5. 应用场景
    • 7.6. 总结
  • 8. 📒 区分 Image 和 Graphic
    • 8.1. 图像（Image）
    • 8.2. 图形（Graphic）
    • 8.3. SVG 中的应用
    • 8.4. 结论
• 0002. 判断浏览器是否支持 canvas
  • 1. ⏰ TODO 待整理
• 0003. 区分 canvas 的 width、height 属性和 style 中设置的 width、height 值
  • 1. ⏰ TODO 待整理
• 0005. canvas 的默认尺寸 300 x 150
  • 1. 📝 简介
  • 2. 📒 notes
  • 3. 💻 demo
• 0006. 使用 JSDoc 来标注 canvas 变量类型
  • 1. 📝 简介
  • 2. 💻 demo1 - 查询已有的 canvas
  • 3. 💻 demo2 - 创建新的 canvas

3. 绘图操作

• 0004. 使用 ctx.clearRect 清除画布
  • 1. 📒 notes
  • 2. 💻 demo1
  • 3. 💻 demo2
  • 4. 💻 demo3
  • 5. 💻 demo4
• 0018. 使用 ctx.fillRect 绘制矩形
  • 1. 📝 简介
  • 2. 📒 notes
  • 3. 💻 demo1 - 绘制一个默认的黑色填充矩形
  • 4. 💻 demo2 - 指定绘制矩形的颜色
• 0019. 使用 ctx.strokeRect 绘制矩形
  • 1. 📒 notes
  • 2. 💻 demo1
• 0020. 使用 ctx.roundRect 绘制圆角矩形
  • 1. 📝 简介
  • 2. 💻 demo1
  • 3. 💻 demo2
  • 4. 💻 demo3
• 0021. 使用 ctx.rect 绘制矩形
  • 1. 📝 简介
  • 2. 💻 demo1
• 0024. 使用 ctx.arc 绘制圆弧
  • 1. 📝 简介
  • 2. 📒 notes
    • 2.1. ctx.arc
    • 2.2. 角度、弧度的转换
      • 2.2.1. 1. 角度（Degree）
      • 2.2.2. 2. 弧度（Radian）
      • 2.2.3. 3. 转换关系
  • 3. 💡 圆参考坐标
  • 4. 💻 demo1
• 0026. 使用 ctx.ellipse 绘制椭圆
  • 1. 📝 简介
  • 2. 💻 demo1
• 0027. 使用 ctx.arcTo 绘制圆弧
  • 1. 📝 简介
  • 2. 💻 demo1
  • 3. 💻 demo2
• 0035. 使用 ctx.drawImage 引入图像
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1 - 保持图片原始尺寸
  • 5. 💻 demo2 - 约束图片尺寸
  • 6. 💻 demo3 - 裁剪图片
• 0040. 使用 ctx.createConicGradient 实现锥形渐变效果
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 💻 demo1
  • 4. 💻 demo2
  • 5. 💻 demo3
• 0041. 使用 ctx.createLinearGradient 实现线性渐变效果
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 💻 demo1
  • 4. 💻 demo2
• 0042. 使用 ctx.createRadialGradient 实现径向渐变效果
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 💻 demo1
• 0043. 给图像添加阴影
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1
  • 5. 💻 demo2
• 0044. 使用 ctx.filter 实现滤镜效果
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1 - blur
  • 5. 💻 demo2 - brightness
  • 6. 💻 demo3 - hue-rotate
  • 7. 💻 demo4 - drop-shadow
  • 8. 💻 demo5 - invert
  • 9. 💻 demo6 - sepia
  • 10. 💻 demo7 - grayscale
  • 11. 💻 demo8 - saturate
  • 12. 💻 demo9 - contrast
  • 13. 💻 demo10 - 使用 url 引用 svg 滤镜

4. 路径和形状

• 0022. 使用 ctx.closePath 闭合路径
  • 1. 📝 简介
  • 2. 💻 demo1 - 自动闭合 vs. 手动闭合
  • 3. 💻 demo2 - 注意 lineWidth
• 0023. 使用 ctx.beginPath 方法对路径进行分组
  • 1. 📝 简介
  • 2. 📒 notes
  • 3. 💻 demo1 - 错误写法
  • 4. 💻 demo2 - 正确写法 1
  • 5. 💻 demo3 - 正确写法 2
• 0025. 使用 ctx.quadraticCurveTo、ctx.bezierCurveTo 绘制贝塞尔曲线
  • 1. 📒 二次、三次贝塞尔曲线绘制原理
  • 2. 💻 demos.1 - 二次贝塞尔曲线
  • 3. 💻 demos.2 - 三次贝塞尔曲线
  • ctx.quadraticCurveTo、ctx.bezierCurveTo 这俩 API 的使用很简单，无非就是传入 2 个点还是 3 个点。重点在于理解贝塞尔曲线的绘制原理。理解原理后，自然就理解这俩 API 应该如何使用了。
  • https://blog.csdn.net/m0_37602827/article/details/118165217 - CSDN - 贝塞尔曲线原理 - 这是 CSDN 上的一篇介绍贝塞尔曲线原理的文章。

5. 文本处理

• 0014. 使用 ctx.fillText、ctx.strokeText 绘制文本
  • 1. 📒 notes
  • 2. 💻 demo1
  • 3. 💻 demo2
  • 4. 💻 demo3
• 0015. 使用 ctx.font 设置字体样式
  • 1. 📝 简介
  • 2. 💻 demo
• 0016. 使用 ctx.textBaseline、ctx.textAlign 设置文本对齐方式
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 💻 demo1
  • 4. 💻 demo2

6. 动画效果

• 0007. 使用 ctx.save 和 ctx.restore 保存和恢复画布状态
  • 1. 📝 简介
  • 2. 📒 notes
    • 2.1. ctx.save 和 ctx.restore 使用场景
    • 2.2. ctx.save()
    • 2.3. ctx.restore()
    • 2.4. 常见用法：存 - 改 - 复原
  • 3. 💻 demo
• 0008. 使用 ctx.lineCap 设置线条端点样式
  • 1. 📒 notes
  • 2. 💻 demo
• 0009. 使用 ctx.lineDashOffset 设置虚线的偏移量
  • 1. 📒 notes
  • 2. 💻 demo
• 0010. 使用 ctx.setLineDash 设置虚线
  • 1. 📒 notes
  • 2. 💻 demo
• 0011. 使用 ctx.miterLimit 约束两线相交处的最大倾斜长度
  • 1. 📒 notes
  • 2. 💻 demo1
  • 3. 💻 demo2
• 0012. 使用 ctx.lineTo 来绘制线条
  • 1. 📝 简介
  • 2. 💻 demo1
  • 3. 💻 demo2
• 0013. 使用 ctx.lineJoin 设置线条连接处的样式
  • 1. 📒 notes
  • 2. 💻 demo
• 0017. 绘制网格
  • 1. 📒 notes
  • 2. 💻 demo1
  • 3. 💻 demo2
• 0028. 矩形边框旋转动画
  • 1. 📒 notes
  • 2. 💻 demo1
• 0029. 线条穿梭动画
  • 1. 📒 notes
  • 2. 💻 demo1
• 0030. 模拟进度条动画效果
  • 1. 📝 简介
  • 2. 📒 notes
  • 3. 💻 demo1
• 0045. 使用 ctx.rotate 实现图像旋转
  • 1. 🔗 links
  • 2. 📒 notes
  • 3. 💻 demo1
  • 4. 💻 demo2
• 0046. 使用 ctx.scale 缩放绘制的图像
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1
  • 5. 💻 demo2
• 0047. 使用 ctx.transform 来转换图形
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
    • 3.1. ctx.transform 坐标转换计算规则
  • 4. 💻 demo1
  • 5. 💻 demo2
  • 6. 💻 demo3
  • 7. 💻 demo4
• 0048. 使用 ctx.translate 移动画布
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1
• 0049. 模拟烟花效果
  • 1. 📝 简介
  • 2. 📒 烟花 - 最终效果
  • 3. 📒 烟花 - 上升过程分析
  • 4. 💻 demo - 实现上升过程
  • 5. 📒 烟花 - 爆炸过程分析
  • 6. 💻 demo - 实现爆炸过程
• 0050. 实现动态时钟效果
  • 1. 📝 简介
  • 2. 📒 动态时钟的最终实现效果
  • 3. 💻 demo - 动态始终效果实现源码
• 0051. 贪吃蛇小游戏
  • 1. 📝 简介
  • 2. 📒 贪吃蛇小游戏 - 最终效果
  • 3. 📒 贪吃蛇小游戏 - 实现原理分析
    • 3.1. 蛇头移动
    • 3.2. 游戏结束检查
    • 3.3. 吃食物检查
    • 3.4. 蛇身更新
    • 3.5. 动画和速度调节
  • 4. 💻 demo - 贪吃蛇小游戏 - 实现源码

7. 图像处理

• 0031. 使用 ctx.clip 实现图像裁剪
  • 1. 🔗 links
  • 2. 📒 ctx.clip 简介
  • 3. 👨‍🏫 搞懂 SVG/Canvas 中 nonzero 和 evenodd 填充规则
    • 3.1. 填充有两种规则
    • 3.2. 一切都是交叉点们的选择
    • 3.3. 啦啦啦，结束语
  • 4. 💻 demos.1 - 裁剪菱形
  • 5. 💻 demos.2 - 裁剪圆形
  • 6. 💻 demos.3 - 理解 fillRule
  • 7. 💻 demos.4 - 问题记录
  • ctx.clip 的基本使用是比较简单的，但是填充规则不太好理解，并且暂时也还不清楚填充规则有何实际的应用场景……
  • 对于填充规则的介绍，文中引用了“张鑫旭”老师的博客文章 —— 搞懂 SVG/Canvas 中 nonzero 和 evenodd 填充规则。
  • ⏰ 在这篇文章的最后一个示例中，存在个问题还没理解。
  • nonzero 和 evenodd 填充规则在笔记 svg.0024 中也有提及。
• 0032. 使用 ctx.createPattern 创建填充图案
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1
• 0033. 使用 ctx.drawImage 绘制视频图像
  • 1. 📝 简介
  • 2. 📒 notes
  • 3. 💻 demo1
• 0034. 使用 ctx.drawImage 实现人物奔跑动画效果
  • 1. 📝 简介
  • 2. 💻 demo1 - 素材图片展示
  • 3. 💻 demo2 - 原地跑
  • 4. 💻 demo3 - 向前跑
• 0036. 使用 ctx.getImageData、ctx.putImageData 实现图像的像素处理
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1 - 置灰
  • 5. 💻 demo2 - 图像反色处理
  • 6. 💻 demo3 - 置蓝
• 0037. 使用 ctx.globalCompositeOperation 处理图像合成
  • 1. 📝 简介
  • 2. 🔗 links
  • 3. 📒 notes
  • 4. 💻 demo1
  • 5. 💻 demo2
• 0038. 使用 ctx.globalCompositeOperation 实现刮刮乐效果
  • 1. 📝 简介
  • 2. 💻 demo1
• 0039. 下载、使用 canvas 图像
  • 1. 📝 简介
  • 2. 💻 demo1