canvas

• 基础
  • 图形、路径、线条的绘制、填充
  • 文本绘制
  • 图片绘制
  • 变形
  • ｜ 类似 CSS transform、translate
  • 合成
  • ｜ 控制图片叠加效果，可用来实现裁剪等功能
  • 裁剪
• 简单应用
  • 使用 canvas 实现图片压缩
  • ｜ 绘制指定大小的图片，简单的实现图片尺寸、大小压缩
  • 图片编辑器
  • ｜ 通过裁剪、变形、滤镜等实现简单的图片编辑器
• 性能优化
  • requestAnimationFrame
  • ｜ 更好的利用浏览器资源
  • 控制画布更新区域，减少更新范围
  • ｜ 如更新区域可控，可清空特定区域然后只对该区域进行更新
  • 减少 API 调用次数，集中绘制
  • ｜ 同 dom 操作
  • 大型计算可借助 webWorker、wasm
  • 使用多层画布
  • ｜ 将场景分层，如游戏里可以拆分背景、人物、菜单，这样可以减少每部分更新的内容
  • 避免浮点数
  • ｜ 使用浮点数时，浏览器会为了抗锯齿而耗费更多性能
  • 善用离屏绘制
  • ｜ 通过离屏 canvas（一个内存中未添加到 body 中 canvas 实例）来绘制一些重复内容，然后复用渲染到屏幕中，减少重复工 作