canvas

行者全栈架构师

我让 AI 独立开发了一款游戏：零依赖、188 个测试全绿、工期压到四分之一参赛声明：本文参加掘金「1024·新饭碗计划」赛道二·作品征集，参赛作品为「熵减特勤局 Entropy Rangers」（话题：#1024AI时代程序员的新饭碗#）。

我用原生 JS 做了一个「会呼吸」的博客：Canvas 水境 + 合成音效 + 会破裂的留言气泡（vibe coding）我用原生 JS 做了一个交互式的个人博客：Canvas 水境 + 合成音效 + 会破裂的留言气泡摘要：本文复盘我的纯前端项目「沉浸式水境博客」——一个没有框架、没有构建、没有一张音频图片素材的个人博客。内容包括：全屏翻页与场景联动的整体设计、Canvas 实时绘制的水波/游鱼/气泡/涟漪、完全用 Web Audio 合成的 7 种音效、以及一个会把留言变成气泡送上海面再「啪」地挤破的留言板。最后记录了部署 GitHub Pages 时用户站点与项目站点的命名大坑。全文代码均可直接参考，线上地址与开源仓库见

从中国城市散点到 3D 全球访客地球：BlogLoom 访客地图的设计与实现BlogLoom 是我做的一套开源博客平台（开源地址：https://github.com/changluya/BlogLoom，线上站点：https://blog.changlu.cloud/）。它很早就有一张后台访客地图：打开仪表盘，就能看到国内哪些城市来过人、哪里最热。

【化学实验室｜04】HarmonyOS ArkTS 场景选择器实战：让 13 个离线实验的入口、筛选和返回路径保持一致实验目录页、实验模拟页和场景选择页单独看都不复杂：目录页展示卡片，模拟页根据 expId 创建引擎，场景页让用户在标准、加热、低温、高压和自定义环境中选择一个选项。真正容易出问题的是三页之间的契约。

MicrosoftReactor

技术速递｜当聊天框不再是合适的交互界面作者：Burke Holland排版：Alan Wang当开发者需要的不只是一个聊天框，而是更直观、可操作的界面时，该怎么办？这时，画布（Canvas）就派上用场了。

【化学实验室｜02】HarmonyOS ArkTS 实验结果载荷实战：用强类型模型隔离页面参数与结果展示一个实验页面把曲线画出来，并不等于结果链路可靠。真正容易出错的地方，往往发生在“模拟结束”到“结果页展示”之间：上一个页面通过 router 传来一个普通对象，结果页直接把它断言成业务类型；表格把每行数据写成 number[]，但没有人保证数组一定有三列；Canvas 又根据最后一行数据推导坐标范围，恰好遇到下降曲线时，前面的点就可能被画到可视区域之外。

行者-全栈开发

华为云码道 CodeArts 实测：让 AI 用纯 TypeScript 写一个确定性回放的塔防小游戏「熵减特勤局」一键开通华为云码道 CodeArts 代码智能体：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwatomgit1&sourcead=dmzntgwatomgithd

使用 Canvas 和 mix-blend-mode 实现跟随鼠标的反色圆圈在一些强调视觉表现的官网中，我们经常能看到这样的交互：鼠标移动到标题上时，会出现一个带有惯性的深色圆圈；圆圈经过文字时，文字也会自动反色。

canvas 旋转图片的六个坑：四角被裁、Math.ceil 多出 1px 黑边、JPG 角发黑、翻转方向反了前端旋转一张图片，看起来就是 ctx.rotate() 一行的事。真写起来，四个角被裁掉、导出多一条黑边、JPG 角上发黑、翻转方向反了，这些问题基本都会遇到一遍。

01 - Luckysheet电子表格技术原理与架构深度解析本文基于「工会预决算报表填报查询系统」的实际项目经验，深入剖析Luckysheet的核心技术原理、数据结构设计、公式引擎、以及在企业级报表系统中的应用实践。

设计稿是 #4A7C6F，页面量出来是 #4B7C6F：HEX、HSL、透明度、canvas 来回转的七个坑上周和设计对颜色，设计稿上写的是 hsl(164, 25%, 39%)，我在页面里量出来是 #4B7C6F，设计给的品牌色却是 #4A7C6F，差了一个 R。两个人对着屏幕看了半天，肉眼根本看不出区别，但 UI 自动化截图对比一跑就报差异。

给规则引擎加一个拖拽画布：Vue Flow 单向投影 + 布局语义分离这是《从零做一个可视化规则引擎》的续篇。上一篇讲表单式条件树，这篇讲怎么在不动既有代码的前提下，加一个拖拽式画布编辑器。含 9 张实现截图。

自定义View在复杂业务场景中的实战在移动应用开发中，系统原生View往往难以满足复杂业务场景的个性化需求，自定义View作为实现UI差异化、提升用户体验的核心技术，广泛应用于直播、地图、金融、视频编辑等各类主流App中。不同于基础的自定义View开发，复杂业务场景下的自定义View不仅需要掌握绘制原理、事件分发等核心知识点，更要兼顾性能优化、业务适配、兼容性等关键问题。

只睡四小时

Canvas 弹道联机实战：700 行 + 固定时间步长一个浏览器里的弹弹堂：调角度、蓄力度、借风力把炮弹糊到对手脸上。全程没用任何游戏引擎——702 行原生 Canvas 前端 + 160 行 Python aiohttp 后端。这篇把它的弹道积分、AI 搜索、权威服务器和 6 个真实踩坑拆开讲，所有数值都是本机跑出来的实测数据，不是估的。

属性动画原理与高级动画实现在Android应用开发中，动画是提升用户体验的重要手段。从早期Android版本提供的补间动画（Tween Animation）和帧动画（Frame Animation），到Android 3.0引入的属性动画（Property Animation），动画框架不断演进，赋予开发者更强大、更灵活的动画控制能力。本文将深入探讨属性动画的原理，并与传统动画进行对比，然后逐步讲解如何自定义插值器与估值器，实现动画的暂停、恢复、反转与组合，最后介绍物理动画（Spring、Fling）的实现，并整合实战案例，构建一

实战案例：实现120fps流畅的渐变进度条✅ 启用硬件加速 (setLayerType(LAYER_TYPE_HARDWARE, null))✅ 避免在onDraw中创建对象

纯前端把图片压缩到指定体积：canvas.toBlob 配合二分查找做在线图片压缩，最常见的实现是给用户一个"压缩质量"滑块，0 到 100 随便拖。但真实场景里用户想要的往往不是"质量 70"，而是"压到 500KB 以内"——报名系统限制、附件大小限制、上传接口限制，给的都是体积，不是质量。

AI工具人PM产品经理

PIL 脚本批量生成小程序图标实战：零美工做出全套 tabBar做小程序最卡我的不是代码，是图标。tabBar 要 4 个 tab × 灰/橙两态 = 8 张，加上各功能入口、证件类型，零零总总二十几张。我不会设计，约美工又贵又慢。

又吹风_Bassy

WhatsCanvas教程-第十一章：性能优化仓库地址：https://github.com/ClarkWain/WhatsCanvas . 本章目标：掌握 WhatsCanvas 的性能优化策略，包括 Picture 录制与光栅化缓存、quickReject、渲染统计、资源管理和性能测试方法。

又吹风_Bassy

WhatsCanvas教程-第九章：窗口呈现与交互仓库地址：https://github.com/ClarkWain/WhatsCanvas . 本章目标：学会使用 OpenGL/Vulkan/Metal/Software 后端将渲染结果显示到窗口，建立帧循环，处理窗口缩放和用户输入。