于一的博客
搜索文章
首页
分类
文章
前端开发
情绪
关于我
心路
首页
分类
文章
前端开发
情绪
关于我
心路
2026 年 09 月
【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
标签：
#
前端开发
【Canvas 2D】day29-canvas-intro
Canvas 入门与坐标系 — 第一块画布，先解决"高分屏模糊" 今天是 Canvas 的第一天：认识 <canvas> 元素、拿到画笔 getContext("2d")、建立坐标系的直觉（y 轴向下！）。但最重要的一课藏在最后：为什么你画的线在 MacBook / 高分安卓机上发虚发模糊？ 答案是
作者：mario
发布时间：2026-09-01
分类：
默认分类
,
Canvas 2D
标签：
#
前端开发
【TS】day28-boss-publish
TypeScript 第四周 BOSS 战 — typed-utils 发布准备 + 第 1 个月毕业总结 三周前你手写了 15+ 个工具类型（第 2 周 BOSS 战），本周给它们装上了生产级配置：严格 tsconfig（Day 22）、双格式模块产物（Day 23）、声明文件（Day 24）、类
作者：mario
发布时间：2026-09-01
分类：
默认分类
,
TypeScript
标签：
#
前端开发
【TS】day27-toolchain
TypeScript 工程工具链 — ESLint / Prettier / Husky 规范三件套落地 一个团队里，A 用单引号、B 用双引号；有人写 any 一路绿灯、有人忘了 await；Code Review 里一半时间在吵格式。今天的工具链三件套终结这一切：typescript-eslin
作者：mario
发布时间：2026-09-01
分类：
默认分类
,
TypeScript
标签：
#
前端开发
共 183 篇文章
1
2
3
4
5
6
7
8
9
10
页
