下载 App
不加载一张贴图,我用 Canvas 程序化 "画" 出了水彩瓶子和液体
09/2421 浏览开发交流
最初我的瓶子和液体都是 PNG 贴图,问题很快就来了:包体大、瓶子皮肤和液体颜色一多就得导出一堆图,想做个选中浮动、倒水的动画更是麻烦。
后来干脆换了个思路 ——DOM 只负责布局和存数据(每个色块带一个颜色标记),在瓶子上盖一层全屏透明 Canvas,所有视觉全部程序化绘制,再用 CSS 把 DOM 的背景图全部 background-image:none 关掉。
液体是怎么画的: ・每个瓶子按色块分段,用 "亮 / 基色 / 暗" 三段渐变先做出体积感; ・再用一套 "材质族" 区分不同水皮肤:果冻族画大颗气泡、宝石族画交错三角刻面和星芒、魔药族用中心自发光的径向渐变加细密气泡、星尘族做纵向深邃感; ・最后补侧壁水光(左侧一道白、右侧压暗)、液面弧度,以及色弱模式下的符号。
瓶身则是先勾出玻璃试管的轮廓和瓶口,再用一张材质参数表(玻璃 / 木 / 金属 / 霓虹)去驱动描边和反光。
这么做的好处很直接:零贴图、包体骤降,换皮肤只改一组参数,任何动画都是重新绘制一帧的事。
踩过的坑也记一下:Canvas 必须和 DOM 用同一套尺寸,窗口 resize 要重绘;要处理 devicePixelRatio,否则高分屏发虚;Canvas 层记得 pointer-events:none,让点击穿透到下面的 DOM。












