400-9969-069 (24h)

028-86052918

首页 > 天健资讯>文章详情

Canvas 核心知识点总结,前端必备干货!

2026.04.17

9

字号: AA A

很多人写 Canvas 卡顿、难维护,本质不是 API 难,而是“思维还停留在 DOM”。这篇给你一份偏实战的 Canvas 技术干货!

blob

一、核心认知(90%的人卡在这)

Canvas 是“立即模式渲染”(Immediate Mode):

画完就结束,不会帮你保存结构

不存在“元素”,只有像素

你必须自己维护:

状态(数据)

渲染(draw)

更新(update)

本质模型其实是:

state -> update -> render


二、性能优化(重点)

1、不要每帧全量重绘

只重绘变化区域(脏矩形)

2、使用离屏 Canvas(OffscreenCanvas)

const off = document.createElement('canvas')

const offCtx = off.getContext('2d')


先画到内存,再一次性贴到主 canvas

避免频繁创建对象

在动画里 new Path / new Image

提前缓存

控制帧率

let last = 0

function loop(t) {

  if (t - last > 16) {

    render()

    last = t

  }

  requestAnimationFrame(loop)

}


三、坐标 & 高清适配(很多人忽略)

Canvas 默认会“模糊”的原因:

没处理 devicePixelRatio

正确姿势:

const dpr = window.devicePixelRatio

canvas.width = width * dpr

canvas.height = height * dpr

ctx.scale(dpr, dpr)


四、绘制体系(建议这样组织)

不要到处写 ctx.xxx,建议封装一层:

class Renderer {

  constructor(ctx) {

    this.ctx = ctx

  }

  drawRect(x, y, w, h, color) {

    const { ctx } = this

    ctx.fillStyle = color

    ctx.fillRect(x, y, w, h)

  }

}

好处:

可维护

可复用

可扩展(比如加动画)


五、动画正确姿势

不要用 setInterval!

function animate() {

  ctx.clearRect(0, 0, width, height)

  update()

  render()

  requestAnimationFrame(animate)

}

animate()

requestAnimationFrame 会自动对齐浏览器刷新率(60fps+)


六、交互处理(命中检测)

Canvas 没有事件系统,你需要自己算:

常见方案:

bounding box 判断

路径命中:ctx.isPointInPath()

canvas.addEventListener('click', (e) => {

  const x = e.offsetX

  const y = e.offsetY

})


七、进阶方向

如果你要做复杂项目(比如大屏 / 编辑器 / 游戏):

分层 Canvas(背景层 / UI层 / 动画层)

WebGL(性能极限)

Worker + OffscreenCanvas(多线程渲染)

数据驱动渲染(类似 React 思维)


总结一句话:

Canvas ≠ 画图工具

它是一个“你自己实现渲染引擎”的能力。


业务咨询:400-9969-069 (24小时服务)
028-86052918

售后热线:028-86052836

在线反馈

关注我们

微信公众号

抖音号

在线反馈

公司地址:成都市武侯区天益街38号理想中心3栋1810

Copyright© 天健世纪科技 All Rights Reserved.

蜀ICP备16016808号

长按/截图保存,微信识别二维码 或关注公众号“天健世纪科技”

扫一扫,关注我们

公司地址:成都市武侯区天益街38号理想中心3栋1810

Copyright© 天健世纪科技 All Rights Reserved. 蜀ICP备16016808号

产品 解决方案 合作客户 服务保障 天健资讯 关于我们