canvas无法实现css float效果，因其是立即模式绘图系统，不维护元素树、不计算流式布局；需手动通过drawimage定位图片、measuretext逐字测宽、按行切分文字并动态调整每行宽度来模拟绕排。
Canvas 本身没有 float 概念，图文混排中的“文字绕图”效果必须手动计算布局——核心是先绘制图片，再按其边界切分文字段落，逐段测量并填充。
为什么 drawImage + fillText 无法直接实现浮动
Canvas 是立即模式绘图系统，不维护元素树、不计算流式布局、不响应尺寸变化。CSS 的 float 依赖浏览器的盒模型与重排机制，而 ctx.drawImage() 和 ctx.fillText() 只是把像素“印”在指定坐标，彼此无语义关联。
常见错误现象包括：
- 文字从左上角硬写，直接覆盖图片
- 用固定偏移“模拟绕排”，但换行后错位或重叠
- 尝试用
measureText()算整段宽度，却忽略字体实际渲染宽度受字号、字距、连字影响
手动实现文字绕图片的三步关键逻辑
以一张左浮动图片（宽 120px，高 180px）+ 正文文字为例，需主动拆解文字流：
-
第一步：确定图片绘制位置和尺寸 —— 调用
ctx.drawImage(img, 20, 40, 120, 180)，记下left = 20、right = 140、top = 40、bottom = 220 -
第二步：按行切分文字并逐行判断是否被图片阻挡 —— 对每行文字 y 坐标（如
y = 60），检查是否落在[top, bottom]区间内；若在，则该行有效宽度为canvasWidth - right（右绕）或left（左绕） -
第三步：用
ctx.measureText()+ 字符逐个试探截断 —— 不要直接对整段调用measureText，而是从开头累加字符宽度，直到超出本行可用宽度，再换行。需预设行高（如lineHeight = 24）并维护当前 y 坐标
容易被忽略的细节与性能影响
真实排版中这些点常导致错行或卡顿：
- 字体度量必须基于实际加载完成的
FontFace或已设置的ctx.font，否则measureText()返回的是 fallback 字体宽度，偏差可达 ±15% - 中文/日文等非等宽字体下，不能假设“每字符占固定像素”，必须逐字测；英文可缓存常用单词宽度提升性能
- 图片若带圆角或
clipPath（需用ctx.clip()实现），绕排区域边界需同步更新，不能只按矩形框计算 - 滚动或缩放时，每次重绘都要重新走一遍切分逻辑——建议将段落行高、起始 x/y 缓存为数组，仅当内容或图片尺寸变更时才重算
最麻烦的不是算法，而是“浮动”在 Canvas 里从来不是自动行为，而是你得为每一处图文交界写一次坐标逻辑。一旦图片位置动态变化，所有文字行的起始点都得跟着重算——这正是放弃 Canvas 做富文本而转向 DOM + CSS 的根本原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
