canvas

从盒模型到画布：以mapbox为例转换过程：Mapbox 内部有一套数学算法（投影矩阵）。它会实时监测地图的中心点、缩放级别和旋转角度，计算出： “经纬度 (114.3, 30.5) 现在对应屏幕上的第 500 像素（左）和第 300 像素（上）” 。

我在 React Canvas 里做了一个液态玻璃透镜效果最近我在 react-canvas 里做了一版「液态玻璃透镜」后处理，目标是：这篇文章记录一下这个效果的实现思路、关键代码和踩坑。

使用纯canvas绘制一个掘金首页在前端开发中，我们习惯了使用 HTML 和 CSS 来构建用户界面。但你是否想过，如果完全抛弃 DOM 树，使用纯 Canvas 来绘制一个复杂的现代 Web 页面（比如稀土掘金的首页），会是怎样的体验？

支付宝小程序数据可视化避坑指南：@antv/f2 踩坑与最佳实践目标读者：正在或准备在支付宝小程序中使用 F2 图表库的前端开发者。核心价值：掌握 @antv/f2 v5 + JSX 在小程序环境下的核心配置、动画时序设计及常见避坑指南，提升图表开发效率。阅读时间：6 分钟

不用 Tailscale：3 步把 Mac mini 通过 FRP 暴露到公网（稳定开机自启）很多折腾 NAS 和 Mac mini 的朋友都绕不开一个痛点：人在外面，怎么优雅地连回家里的设备？之前我一直用 Tailscale，虽然小白友好，但缺点也很要命——每台设备都得装客户端。而且SSH反向代理动不动就掉线，这让人很很不方便。

叫我一声阿雷吧

原生 JS 实现图片预览上传组件：多图上传 + 拖拽上传 + 裁剪预览 + 进度显示（附完整源码）图片上传是前端开发中高频且核心的功能场景，如头像上传、素材管理、表单提交等。本文基于原生 HTML+CSS+JavaScript 实现一套企业级图片预览上传组件，包含多图选择、拖拽上传、实时预览、图片裁剪、上传进度显示、文件大小 / 格式校验等功能，无任何第三方框架依赖，代码模块化封装，可直接集成到各类项目中。

天若有情673

Canvas生成艺术｜意外诞生的混沌风暴（附完整源码+GitHub部署）哈喽大家好！我是董翔（GitHub：dxiangwiki），一个刚入门Canvas的前端小白，今天给大家分享一个「无心插柳」的Canvas生成艺术作品——混沌风暴（Chaos Storm）。

跨技术栈：在Flutter/Compose中应用自定义View思想作为常年深耕Android原生开发的程序员，自定义View无疑是我们打造个性化UI、实现复杂交互、优化页面性能的核心技能。从继承View重写onMeasure、onLayout、onDraw，到继承ViewGroup实现专属布局逻辑，这套原生UI开发思维早已深入人心。然而，随着跨平台技术的普及，Flutter与Jetpack Compose成为移动端UI开发的两大主流方向，不少开发者陷入了误区：要么认为声明式UI彻底抛弃了原生自定义View的思路，要么无法将原生的UI开发经验平滑迁移到新框架。

企业级图表组件库完整实现ChartMaster是一个遵循MVVM架构、支持高度配置化、可测试的企业级图表组件库，包含完整的架构分层和丰富的功能特性。

前端进阶：小程序 Canvas 2D 终极指北 — 给图片优雅添加水印在之前的文章中，我们详细拆解了如何使用小程序旧版 Canvas API 给图片添加水印。随着小程序框架（如 Taro、uniapp）和微信底层基础库的演进，Canvas 2D 凭借更高清的渲染质量和更好的性能，已经逐渐成为业界首选方案。

小白也能看懂：小程序 Canvas 给图片添加水印的终极指南在小程序开发中，给用户拍摄的图片或上传的图片添加“自带信息”的水印（如：打卡时间、地点、防伪标识等）是一个非常普遍的需求。

Canvas 直线点击事件处理优化在平常Canvas开发中，经常会遇到直线的点击事件问题，对于这类问题通常的做法就是使用isPointInStroke，但直接使用存在一个问题就是直线的宽度较小时，鼠标点击不太容易选中。下面是针对这类问题总结的一些优化方法。

大屏天气展示太普通？视觉升级！用 Canvas 做动态天气遮罩，雷阵雨效果直接封神之前做天气那个模块的时候，突发奇想想做一个大屏实时展示天气状况的蒙版。# Vue实现大屏获取当前所处城市及当地天气(纯免费)

【Three.js多相机渲染】如何在同一场景里实现“画中画”效果你以为一个场景只能有一个相机？太天真了上个月，产品经理拿着一个监控大屏的设计图来找我：“小叶，你看这个效果——主画面看整个车间，右下角有个小窗口专门盯着那台最关键的设备，实时放大，能不能做？”

手写无限画布4 —— 从视觉图元到元数据对象画布上的每一个像素都是稍纵即逝的，真正永恒的，是背后那套被精心设计的元数据（Metadata）规范。尽管在前面的篇章中，我们一路披荆斩棘，搞定了坐标系、渲染层和基本交互，让演示工程初具雏形。但 Canvas 本质上只是一块没有记忆的像素面板。

手写一个无限画布 #3：如何在Canvas 层上建立事件体系你以为你点中了一个圆，其实你只是点中了一堆毫无意义的像素点。在画布里，所谓的“选中”，不过是一场精密的数学与色彩幻术。

手写一个无限画布 #2：渲染层的博弈：Canvas 还是 WebGL ？很多人会问：为什么不用 DOM？为什么不用 SVG？答案其实很残酷。浏览器为了渲染 DOM 和 SVG 节点，底层维护了一套极其庞大的对象模型和布局引擎。每一次你在触控板上轻轻一划，哪怕只是让相机的世界坐标移动几个像素，都可能被迫引发大量节点的重排（Reflow）与重绘（Repaint）。

手写一个无限画布 #1：坐标系的谎言打开 Figma，或者启动蓝湖（Lanhu）查看标注，又或是打开 Lovart 开始绘图。双指捏合，画布缩小了。两指一推，画布滑到了左边。点一下那个蓝色的矩形，选中了。

深入理解滑块验证码：那些你不知道的防破解机制你是否遇到过这样的尴尬：明明自己是个真人，却被验证码折磨得怀疑人生？据统计，传统图文验证码的用户放弃率高达40%。但你知道吗？滑块验证码背后藏着一套精密的防破解机制，它就像是一位经验丰富的安检员，在毫秒之间通过你的"微表情"判断你是不是真人。

深入浏览器指纹：Canvas、WebGL、Audio是如何暴露你的身份的？你以为清除了Cookie就安全了？2025年约翰霍普金斯大学的研究首次证实：浏览器指纹追踪比你想象的更普遍，而且你几乎无法阻止它。