大家好我最近把一条白板视频从构思到成片完整跑了一遍发现最难的环节居然不是文案而是“让每一笔都像真人拿着笔在画”。这条视频不是用录制屏幕或手绘实拍做的而是走了一条比较硬核的路——给代码写脚本让每一笔轨迹、每一帧动画都从程序里生成。过程中我还顺手把它沉淀成了一个可复用的 skill也就是一套带参数、带模板、带提示词的白板视频生成技能包。这篇文章不聊剪辑软件里的花哨转场只聊怎么用代码控制画笔把白板视频做成“每一笔都可控、每一帧都可复算”的状态。你如果打算批量产出解释类视频或者想给自己的分享内容加一个高辨识度的动画形式这套思路可以直接抄。这个 skill 解决的并不是“能不能画出一条手写线”的问题而是“如何稳定地、批量地画出一整条视频的所有笔画”。手绘感只是表面真正值钱的是背后那套把口播稿、分镜、坐标、时间轴、渲染参数全部结构化的流程。只要你把这条链路跑通换一个主题、换一批文案剩下的工作基本上就是改文字和坐标点。1. 项目构想为什么非要用代码来“画画”1.1 白板视频到底解决了什么问题白板视频这种形式之所以被大量用在知识科普、产品讲解和课程视频里是因为它在视觉上制造了一种“正在发生”的现场感。观众看到一支笔在屏幕上一笔一笔画出流程图、关键词、箭头注意力会比直接看到一张静态PPT更集中因为大脑会下意识等待下一个笔画到达哪里这种期待感天然拉长了关注时间。但它最大的麻烦在于制作成本。真人手持相机或带支架对着白板写写错了不好改写完一页还得换页用iPad录屏再加速又容易出现手抖、误触、笔画飘的问题。而我们用代码画本质上不是放弃了手绘感而是想保留“手绘的过程感”同时去掉真人物理层面的不可控。我的做法是在白板视频里把每一帧都当作一帧程序输出。脚本里写了此刻应该画到哪根线条的百分之多少渲染器就忠实地画出那一段不模糊、不抖动、不产生物理误差。这样做的好处非常直接——同一套代码换一批文字和坐标就是一条新视频同一个镜头配音不满意可以直接改时间轴重渲不需要重画。1.2 从口播稿到分镜脚本再到程序画布很多人一听到“代码画视频”就以为全是炫技其实真正动起手来第一步和我们拍任何片子都一样是从“文字内容”开始的。我习惯先把口播稿完整写出来然后做一件很机械的事——数句子、掐时间。普通口播的语速大概在每分钟 240 到 270 字之间科普类会稍慢一点我按 250 字每分钟来估算。把口播稿拆成几段之后每一段大概几秒钟这一段里画面应该出现什么线条、什么关键字就要对应在时间轴上排好。这一步完成之后才轮到代码上场。所以这个项目的真正骨架不是画布不是画笔而是那张“口播稿-时间轴-画面元素”的对照表。如果你没有这张表就直接开始写绘制脚本结果一定会很惨画到一半发现配音已经讲到下一个要点或者某个箭头在嘴里提到它之前两秒就画完了观感会非常诡异。1.3 为什么选择“每一笔都由代码绘制”而不是录屏或手动动画我见过不少人用“屏幕录制自动书写”功能来做白板视频比如在 PPT 或笔记软件里画好图形然后开录屏再用第三方插件生成笔迹效果。这样做的优点是上手快缺点也明显每一次修改都要重新录屏笔画速度完全依赖鼠标或触控笔的移动均匀度而且很难做到和配音精确对齐。代码方案虽然前期搭建麻烦但换来的确定性非常值。以一条 5 分钟的视频为例脚本语言可能有几百行但这些行全部是可维护的。我对笔画不满意改一个缓动函数就能调整手绘节奏我觉得某个箭头出现的位置太靠边改两个坐标点就能重排。这种事情在录屏方案里基本等于重来一遍。当然代码绘制也不是万能的。它更擅长几何图形、流程框图、文字标题这类“结构明确”的白板内容。如果是需要表现真实手绘的复杂插画比如画一只带毛发的猫那我依然建议你先用分图层素材导入而不是逐帧调坐标。项目定位要清楚我们要做的是“思路可视化”的视频不是“数字手绘插画”的视频。2. 核心准备画布、画笔与渲染链路2.1 技术选型Canvas、SVG、Manim 还是桌面渲染既然决定让代码画画第一步就是选一个合适的“画板”。我实际对比过几条路线各自有明确的使用场景。Web Canvas 的优点是灵活、轻量JavaScript 生态里可以很快调出带路径动画的绘制逻辑还可以直接在浏览器里预览调整参数后刷新即看结果非常适合快速迭代。如果你熟悉前端这条路线是最友好的。它的缺点是相对底层画一个圆、写一行字、做一笔擦除都要自己处理原语没有现成的东西。SVG 和 Canvas 的定位类似但 SVG 是矢量结构天然适合精确控制每个图形元素的路径。半径、圆心、路径节点都能在 DOM 上直接读取和修改。如果白板视频里的元素大量是流程图、表格、坐标轴用 SVG 做基础渲染再配 CSS/JS 动画也是顺手的选择。Manim 这类 Python 动画引擎则适合数学、物理、数据分析类的解释视频。它能把公式、几何变换、坐标轴动画做得非常漂亮但风格偏“演示文稿动画”和真人手绘的质感不太一样需要额外调慢笔画速度、加上噪声抖动才能模拟白板笔迹。我最后选的是 Canvas 加自研的小型动画控制器。原因很简单我不想被某个动画框架的抽象概念限制住白板视频的实质就是“一条路径按时间展开”这个逻辑用一个画笔类就能概括没必要引入重型依赖。2.2 最小可行的绘制原语线条、矩形、圆、文本、擦除要把任意白板画面组合出来并不需要几十种绘图API真正高频的原语只有五个线条、矩形、圆/椭圆、文本、擦除。其中“擦除”比较特殊它不是真的把像素删掉而是用一段白色笔划来模拟真人拿板擦把画面擦掉的动作配合透明度变化就会显得自然。这五个原语一定要封装成统一的“笔动作”接口否则脚本会越来越乱。我习惯给每个动作定义一个对象包括动作类型、目标坐标、开始时间、持续时长、缓动函数、笔画宽度和颜色。一个结构化的笔动作在脚本里长这样{ type: stroke, // 线条 points: [...], // 路径点数组 start: 1.2, // 开始时间单位秒 duration: 0.8, // 绘制时长 easing: easeInOut, width: 6, color: #444444 }统一封装之后渲染器只需要遍历这一系列动作按照系统时钟逐帧计算“当前动作画到百分之几”然后画出对应的部分。这套设计几乎不需要架构文档一天之内就能写出来但它支撑了我之后所有白板视频的产出。2.3 画布坐标系与比例设计坐标系设计是新手最容易忽略但又极其致命的环节。很多白板视频在不同屏幕比例下会伸拉变形或者最终导出 1080p 画面时边缘被裁掉根源就是一开始没有固定逻辑画布。我的做法是固定逻辑画布为 1920x1080所有元素坐标都基于这个坐标系来排布渲染导出时按实际输出分辨率做等比缩放。这样做之后不管最终交付是 16:9 的横屏还是 9:16 的竖屏只需要在导出层做缩放内部坐标不需要动。与此同时还要考虑“安全边界”。白板视频里我们通常会把核心内容放在画面中央 80% 的安全区域边缘只放装饰元素。因为很多播放器会预览比例裁剪侧边留白太少观众在剪辑软件里看到的框和你自己渲染的预览会对不上。坐标映射上我会把“原点”放在画布左上角横纵坐标都是像素整数防止累加计算时产生半个像素的漂移。2.4 动画时长、延迟和缓动函数的选取逻辑白板视频最容易假的地方其实是“均匀速度”。真人握笔时起笔会有轻微加速收笔会有一个短促的减速中间又会因为思考而有停顿。如果我们用匀速绘制观众会明显感觉到机械感哪怕线条本身很圆滑视觉上也觉得“不对劲”。所以每个动作的时长和缓动函数需要单独配置。我的默认规则是这样短线条用 0.3 到 0.6 秒easeOut 让收笔变缓长线条用 0.8 到 1.5 秒中间可以插一个 0.2 秒的停顿文字逐字出现时每个字 0.15 到 0.25 秒保持固定的节奏除非有特殊重音。延迟设置则要根据配音来倒推。我的脚本里每个笔动作都带 start 时间直接来自配音时间轴。为了让切换更自然前后两个动作之间会有 0.1 秒到 0.3 秒的重叠窗口也就是上一个动作快收尾时下一个动作已经开始起笔模拟真人快速换笔的节奏。这个细节单独看不大但整条视频下来观看体验会顺滑很多。3. 实操过程从 0 到 1 完成一条白板视频3.1 第一步拆分口播稿给每个动作排时间轴这一步完全不涉及代码但它决定了后面代码全部参数。我拿一段 60 秒左右的科普口播举例假设口播稿是“你每天看到的推荐系统本质上在做三件事。第一件事是收集行为数据第二件事是建立用户画像第三件事是实时匹配内容。”按 250 字/分钟估算这段大约 12 秒。去掉标点和停顿我把内容进一步拆成了 5 个画布动作先画中央的“推荐系统”标题然后依次画三个模块框再用三根箭头指向右边的一个结果框。时间轴表格可以非常简单时刻秒动作画面元素0.0-1.2画标题“推荐系统”中央顶部1.2-2.6画第一个框“收集数据”左侧上方2.6-4.0画第二个框“用户画像”左侧中部4.0-5.4画第三个框“实时匹配”左侧下方5.4-7.0画三根箭头汇聚中间连接区域这张表是我写代码时的唯一依据。如果配音稿还没录可以先按估算时间排等配音录好之后再精修每段起止时间。我会在录音软件里看波形图把每句话边界记下来替换表格里的估算值。3.2 第二步写绘制脚本让画笔跟着时间走有了时间轴就可以写核心绘制脚本了。我在浏览器 Canvas 上实现了一个非常精简的画笔类关键逻辑是“当前帧应该画到哪”。下面的代码示例只保留了最核心的部分但这就是整个白板视频引擎的地基const canvas document.getElementById(whiteboard); const ctx canvas.getContext(2d); const W 1920, H 1080; let actions []; let currentTime 0; function easeOut(t) { return 1 - Math.pow(1 - t, 3); } function draw() { ctx.clearRect(0, 0, W, H); for (let a of actions) { if (currentTime a.start) continue; if (currentTime a.start a.duration) { drawFullAction(a); continue; } let t (currentTime - a.start) / a.duration; t Math.max(0, Math.min(1, t)); if (a.easing easeOut) t easeOut(t); drawPartialAction(a, t); } requestAnimationFrame(draw); } function drawStrokePoints(points, progress) { const total points.length - 1; const n Math.floor(progress * total); ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y); for (let i 1; i n; i) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); }当你看到画面当前只画到 stroke 路径 60% 的位置代表这就是某一帧的真实输出。为了让“手写感”更强我还会在全路径绘制完成后的 0.1 秒内保留一个透明渐变尾巴而不是把线头生硬截断。画几何图形比如矩形我会先画一个矩形路径然后对这个路径做同样的百分比抽样。矩形四条边按逆时针顺序拆分成长度相等的子段这样矩形出现时不会四条边一起弹出来而是像真人沿着边框一笔画出。圆形本质上是若干点连成的贝塞尔近似我直接对路径取样再按百分比展开。文字部分更特殊。白板视频里的文字通常是标题或关键词我会让文字“逐字显示”不是整行同时浮现。脚本里按照字符位置切分子串每个字符的显示时长单独计算配合一个轻微的透明度过渡就很像老师板书时写完一个字停顿一下再写下一个字。3.3 第三步把帧渲染出来和配音合轨浏览器预览没问题之后需要把 Canvas 动画导出成 mp4。这一步我推荐两条路线一条是在浏览器里用录制帧的方式把每一帧保存为 PNG 序列然后用 ffmpeg 合成视频另一条是直接用 Canvas 捕获流配合麦克风或音频文件实时录制。我建议用帧序列而不是实时录制理由很简单帧序列的每一帧都是静态 PNG不受浏览器刷新率波动影响导出的时间轴完全精准。实时录屏如果掉一帧整个画面节奏就会错位尤其是我们还要和配音精确对齐补帧非常痛苦。ffmpeg 合成命令可以这么写ffmpeg -framerate 30 -i frames/frame_%04d.png -i voiceover.mp3 \ -c:v libx264 -pix_fmt yuv420p -crf 18 -r 30 \ -c:a aac -b:a 192k -shortest whiteboard_video.mp4这条命令中的-framerate 30和-r 30必须保持一致否则会得到一段莫名其妙的匀速加速视频。-crf 18是高画质设置白板视频里文字线条比较多码率太低容易出现细线闪烁和文字边缘糊掉的情况所以我宁可输出文件大一点也要保住线条锐利度。如果某一段画面里需要加入“真人手掌遮挡”的效果比如模拟手在画面里移动的阴影我会在渲染脚本里额外画一个半透明的肤色椭圆移动路径和当前笔画的行进路径保持同步。这个素材可以独立控制不透明度让画面更有“现场感”但要注意别过度使用它只是用来增强手绘氛围的。3.4 第四步导出前的检查清单与验收标准在导出成片之前我会跑一套“验收清单”相当于质量门禁。第一项是边界检查把所有元素坐标批量检查一遍确认它们都在安全边距以内尤其是文字不能在画布边缘出现半个字。第二项是时序检查把每一个笔动作的开始时间和时长输出成 JSON和配音波形对齐看一遍重点检查长句和关键停顿处是否贴合。第三项是渲染细节检查。因为白板视频充满了细线分辨率不对会出现“断线”或“灰线”我会把渲染窗口的像素比 devicePixelRatio 设为 2确保逻辑坐标和实际帧像素的映射关系正确。第四项是文件体积一条 5 分钟的 1080p 视频用-crf 18后大小通常在 80MB 到 150MB 之间如果过大可以适当调高 crf 到 20 或降低部分背景装饰的复杂度而不是把分辨率降下来。验收标准其实是给“肉眼”看的。我会把视频拿到小屏幕手机上播放一遍再拿到大屏上播放一遍因为手机上的细节观感和显示器完全不同。很多时候电脑上看起来很精致的笔触在手机端会因为尺寸缩小变成一坨黑色模糊的线条。发现这类问题我会回去调“笔画宽度”把主要线条从 6px 调整到 8px 甚至 10px清爽程度立即提升。4. 常见问题与排查技巧实录4.1 笔画断裂、线条抖动和边缘锯齿代码画线理论上很精确但实际操作中我遇到过大量的“断线”问题。最常见的原因是路径点太稀疏画直线时起点和终点都清楚但是画曲线时如果采样点不够放大后看起来就是折线。解决方案很简单渲染前对路径点做插值让相邻两点之间的距离不超过 1 像素。插值之后线条就会非常平滑。另一个高发问题是“重叠线”。在多段笔画拼接时如果没有重叠区域放大看连接处会有细缝。解决办法是在两个笔画的终点和起点之间多留出 3 到 5 像素的重叠量同时把 Canvas 的lineCap设为round这样接缝处会有自然的圆头过渡肉眼几乎看不出是两笔。锯齿问题通常和 canvas 的坐标取整有关。如果坐标使用浮点数抗锯齿会产生半透明边缘线条会显得发虚如果直接把坐标Math.round()取整则可能出现 1 像素的跳动。我的经验是逻辑坐标保持浮点渲染前统一乘一个像素比再做一次取整让所有线条落在物理像素点上。4.2 笔迹和配音不同步怎么修正都不准同步问题是白板视频最核心的技术难点几乎不可能完全用手调解决。我踩过的坑是我在时间轴上为每个动作设置 start 和 duration但配音的语速并不是匀速的同一句话里可能有明显的停顿。只按字数是完全不够的。所以我现在会先录好配音再在剪辑工具里看波形把每句口播对应的时间码抄下来再填回绘制脚本。如果片子很长我会把时间轴表拆成每 5 秒一段逐段校对特别留意“语气转折”和“强调词”前后 0.2 秒的偏移。还有一个小技巧把画笔动作和语音“关键词”绑定而不是和整个句子绑定。比如配音说到“用户画像”这个词的瞬间画面里的文本“用户画像”正好出现完整。这种词级对齐会让整体观感精确到“音画同步”观众会下意识觉得视频剪辑天衣无缝。为了做到这一点我会在时间轴表中额外加一列“触发词”脚本里根据触发词出现的时间自动计算当前动作的开始时间。4.3 导出后画质模糊、细线闪烁、文件体积过大画质问题主要出现在导出环节。很多人直接把浏览器 Canvas 的分辨率设为窗口大小比如 1280x720然后导出 720p。这样没问题但如果你想输出 1080p必须从一开始就把 Canvas 的宽度设为 1920。如果渲染后再拉伸细线和文字边缘一定糊。细线闪烁的问题通常出现在高动态文字逐字显示时。文字所在的区域不断重绘如果背景有轻微的亚像素变化就会让文字边缘出现闪烁。我的对策是文字逐字显示时把文字区域单独用离屏 Canvas 渲染成一整帧再作为图片贴到主画布上避免逐字重刷造成的细微抖动。文件体积大的问题可以用两步走。先用-crf 23导出一个初稿用于预览等确认没有问题后再用-crf 16输出最终版本。白板视频大多数内容都是静态画面并不需要太高的码率很多时候把音频码率从 320k 降到 192k文件大小变化比视频参数改动还明显我通常优先调音频码率。4.4 把做视频的流程真正沉淀成一个“skill”“skill”这个点子其实是来自我做第二条白板视频时的一个感悟我又一次复制了上一期的脚本模板改了坐标和文案却发现有大量时间浪费在调整参数上。于是我把整套流程固化成了一个可复用的技能包里面包含几层东西。第一层是“提示词和分镜模板”也就是输入口播稿之后怎么按固定格式生成时间轴和画面元素。这个模板我反复改了很多次里面规定了每个画面元素必须包含类型、文本、坐标、起始时间、持续时长、缓动方式六个字段缺一不可。第二层是“绘制脚本模板”所有白板视频共用同一个 Canvas 渲染器每个动作都是 JSON 配置对象。新视频只需要生成新的 JSON 配置文件不需要改动渲染器的任何代码。第三层是“参数库”。我保存了 18 组预设参数比如“流畅板书模式”“快速思路模式”“教学重点模式”切换模式其实就是调整笔画速度、停顿系数、擦除动作比例。这个参数库让新视频从配置到渲染的时间压缩到了 20 分钟以内。也就是说白板视频这个“skill”的重点不在于会写代码而在于把视频导演的决策过程数字化。时间轴、画布、路径、配音入口全部变成可配置的数据后量产白板视频就真的像套模板填内容一样简单了。5. 给新手的起步建议与后续扩展方向如果你刚接触这个方向我建议你不要一上来就弄很复杂的动画引擎先用 Canvas 加一个简单的画笔类跑通前 10 秒的视频就足够。那个能跑通后面所有复杂度都可以慢慢叠加比如视频分镜之间加淡出转场、加手势动画、加音效提示音这些都是锦上添花不是核心。我强烈的建议是先做一条 30 秒以内的短视频主题选你自己最熟悉的东西比如“为什么早起”或者“一个常用快捷键的用法”。然后用我上面提到的流程把这条视频的每一帧都控制在“画到哪一笔”的语义里。只要你能不看代码准确说出第 3 秒画面里那条线应该画到什么位置你就算真正掌握了这个 skill。后续还可以往几个方向扩展。一个是把渲染逻辑从 2D 平面升级到“伪 3D 透视”在白板画面里加入轻微旋转和缩放让镜头有一种在纸上移动的感觉。不过这种扩展要有节制因为白板视频的识别度就来自于“正对白板的固定镜头感”一旦镜头动太频繁质感反而会打折。另一个方向是素材库的建立。把箭头、框架图、图标这类高频元素预生成成带路径的几何模板之后画布上只需要引用模板 ID 和坐标就能在镜头前实时展开绘制。素材库可以大幅降低时间轴配置的工作量是我目前在这个 skill 里长期优化的重点。还有一条隐藏道路把白板视频和语音识别结合根据实时念出的文案自动调整画笔位置。技术上可以做到让“画面自己决定画什么”但这个方向目前还很粗糙我不建议新手碰容易陷入不停调参和捉虫的泥潭。最后说点个人体会。白板视频用代码画最迷人的地方不是“逼真”而是“确定”。作为创作者我可以在任何时间、任何设备上重制同一个画面并且知道它一定长成预料中的样子。这个感觉比传统的录屏手绘来得踏实得多。如果你也总被剪辑参数折磨建议试试给画笔写一份纯代码的契约——那种每一帧都在掌控里的清爽感值得体会一次。