【Canvas 2D】day49-boss-flowchart

Day 49 · BOSS 战：流程图编辑器 — Canvas 进阶的毕业考核六天积攒的武器，今天全部上战场：文本排版引擎（Day 43）画节点标签、clip 蒙版（Day 44）做选中高亮、碰撞检测（Day 45）防节点重叠、脏矩形（Day 46）保住 60fps、多层画布（Day 47）分离静

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day48-interaction-manager

Canvas 图元交互内核 — 命中优先级、拖拽、框选，编辑器的交互引擎前面积累的所有零件今天组装成一个模块：InteractionManager（交互管理器）。它统一处理编辑器类产品的全部交互：点击选中（谁在上面选中谁——命中优先级）、hover 悬停（光标反馈 + 高亮）、拖拽移动

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day47-multi-layer

Canvas 多层画布架构 — 静态层、动态层、交互层，各司其职脏矩形解决了"重绘多少"，但它要求所有内容共享一块画布——网格背景、设备图元、选中框搅在一起，每次都要小心维护 z 序和脏区。多层画布从架构层面根治问题：几块同尺寸的 canvas 像千层饼一样叠在 DOM 里，按"变化频率"分层——

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day46-dirty-rect

Canvas 脏矩形优化 — 只重绘"脏了"的地方目前为止我们所有动画都是"全屏重绘"：每帧 clearRect 整个画布，再画所有内容。1000 个图元的画面拖动其中一个，另外 999 个没变——但它们每帧都被重画了 60 次，全是无效功。脏矩形（Dirty Rectangle）优化反其道而行：

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day45-collision-detection

Canvas 碰撞检测 — AABB、圆、矩形，图元世界的物理规则拖一个设备图元靠近另一个，什么时候算"碰上了"？答案不能靠感觉，要靠数学判定。今天学三套判定算法：AABB（轴对齐包围盒，矩形图元的标准答案，快到飞起）、圆-圆（距离平方比较，Day 34 命中检测的正式展开）、圆-矩形（最近点法）

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day44-clipping

Canvas 裁剪 clip — 路径变身模板，非矩形可视区域的秘密到今天为止，我们画的东西都是"画多大就显示多大"。但产品里到处是"只显示一部分"的需求：进度环只显示扇形部分、头像只显示圆形区域、雷达图只显示多边形内部。Canvas 的答案叫裁剪（clip）：把当前路径变成一块"镂空模板"，之后

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day43-text-layout

Canvas 文本渲染进阶 — 自动换行、省略号、多行排版，写出排版引擎 Day 33 学的 fillText 是"一行流"：给坐标、画一行。但真实产品里的文本全是"排版问题"：节点标签要在固定宽度里自动换行，太长要截断加省略号，多行要控制行高，仪表盘可能还要

作者：mario 发布时间：2026-09-02

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day42-boss-filter-editor

Day 42 BOSS 战：图片滤镜编辑器 — 第 6 周技能总决战本周 6 天的技能，今天在一个完整产品里全部串起来：ImageData 读写（Day 39）是数据层；滤镜算法（Day 40 的灰度/反色/亮度/对比度/模糊/锐化）是处理层；Worker 后台处理（Day 41）保证大图调参时

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day41-offscreen-performance

Canvas OffscreenCanvas 与性能优化 — 离屏渲染 + Worker，告别卡顿昨天的卷积滤镜在 1080P 上能卡住主线程 30ms+——今天学两把"性能手术刀"。第一把：离屏预渲染（OffscreenCanvas），复杂静态内容（大屏背景、网格、装饰）画一次存起来，每帧只做一

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day40-convolution-filters

Canvas 卷积与滤镜算法 — 一个 3×3 矩阵扫过全图，模糊锐化全靠它昨天学会了读写像素，今天让像素"变魔法"。先学三个"逐像素独立运算"的入门滤镜：灰度（为什么不是 RGB 平均而是加权？）、反色（一行核心代码）、亮度/对比度（乘加运算）。然后进入图像处理的皇冠——卷积<

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day39-imagedata-basics

Canvas ImageData 像素基础 — 直接读写每一个像素前三天的变换还在"绘制 API"的框架内——你告诉 Canvas 画什么，它替你算像素。今天换一条路：getImageData 把整幅画面的像素抄出来给你（一个巨大的数字数组），你随便改，putImageData 再写回去。这条路绕

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day38-transform-matrix

Canvas 变换矩阵 — setTransform 与"以鼠标为中心缩放"的数学本质昨天的三件套 translate/rotate/scale，其实是三颗"快捷键"——它们底层都在修改同一个东西：变换矩阵（一个 2×3 的数字表格）。今天把这个底牌翻开：搞懂 setTransform/trans

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day37-basic-transforms

Canvas 基础变换三件套 — translate / rotate / scale，坐标系随心而动昨天学会了用 save/restore 保护状态，今天正式开上"变形金刚"：translate（搬桌子）、rotate（转桌布）、scale（拉伸桌布）。核心思想一句话：不是把图形转个角度画出来，

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day36-save-restore

Canvas save/restore 状态栈 — 给 ctx 装上"后悔药" 第 5 周我们吃过两次"状态泄漏"的亏：Day 32 的阴影四件套画完没关，后面每个图形都带光晕；Day 35 画板的橡皮擦（destination-out）结束没恢复，画笔也变成了橡皮。当时的解法是"手动复位每个属性"

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day35-boss-paint-board

Day 35 BOSS 战：简易画板 — 第 5 周技能总决战本周 6 天学的每个技能，今天要在一个真实作品里全部用上：DPR 适配（Day 29）让画板在 Retina 屏上清晰锐利；平滑笔迹（Day 30）让线条不再锯齿；颜色与粗细（Day 31）提供创作自由度；橡皮擦（Day 32 的 de

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day34-interaction-animation

Canvas 交互与动画基础 — 让画面"活"起来前 5 天我们画的东西都是"静态"的：画一次，定住不动。但工业可视化的灵魂是实时——温度在变、曲线在滚、报警灯在闪。今天把两样东西接上：交互（鼠标/触摸 → 画布响应）和动画（requestAnimationFrame 让画面每帧重绘）。学完今天，

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day33-text-images

Canvas 文本与图片 — 排版锚点与九参数裁剪，附"画布污染"大坑前四天画的是"形"，今天补上"字"和"图"。文本：font 的 CSS 简写顺序、textAlign/textBaseline 构成的锚点体系（大屏数字对齐的关键）、measureText 的测量（自适应缩放文本的原理）。图片：

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day32-shadow-compositing

Canvas 阴影与合成模式 — 发光效果与"图层混合"体系今天解锁 Canvas 的"高级感"双引擎：阴影让图形脱离平面（发光、投影、立体），合成模式（globalCompositeOperation）让新画的图形与已有内容产生 12 种化学反应——叠加提亮、挖洞、遮罩、异或……工业场景的报警灯

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day31-gradients

Canvas 渐变与填充 — fillStyle 的三种形态，画出"质感" 纯色填充的界面像简笔画，渐变填充的界面像产品。今天把 fillStyle 的三种形态一次学全：颜色（四种格式的选型）、渐变（线性的"两点一线"、径向的"同心圆"）、图案（Pattern 平铺）。工业可视化的质感密码全在这天：

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发

【Canvas 2D】day30-paths-bezier

Canvas 路径与线条 — 折线、圆弧、贝塞尔，一切图形的骨架昨天的矩形三件套是"预制板"，今天的路径（Path）才是自由施工：从一点出发，moveTo 起笔、lineTo 走直线、arcTo 转弯、bezierCurveTo 画任意曲线，最后 stroke 描边或 fill 填充。路径是 Ca

作者：mario 发布时间：2026-09-01

分类：默认分类 , Canvas 2D

标签： #前端开发