canvas

从零构建 AI 学术论文助手（四）：PDF.js 实时截图 + Gemini 视觉分析系列文章第四篇。本篇讲一个看似简单但暗坑极多的功能：在网页上展示 PDF，允许用户拖拽框选任意区域截图，然后发给 AI 解读图表和公式。

网页 UI 终于能进游戏和 3D 场景了：HTML-in-Canvas 为什么重要如果只用一句话解释 HTML-in-Canvas：它让真实网页 UI 既保留“网页该有的好用”，又能进入 Canvas、WebGL、WebGPU 的视觉世界。

HTML5 Canvas 基础：从按帧动画到 ECharts 数据可视化这一次让我们将目光转向前端绘画的基础，Canvas 标签。Canvas（画布）是HTML5中一个非常重要的元素，它提供了一个可以通过JavaScript绘制图形的区域.

HTML-in-Canvas 深度解析：让 Canvas 真正「吃上」HTML 这碗饭做过 Canvas 项目的同学，应该都经历过这种痛苦：HTML-in-Canvas 是 WICG 正在推进的一项实验性 Web 标准，目标很简单：

🚀 手把手用 HTML5 Canvas 从零打造飞机大战游戏，代码全开源！摘要：本文从 Canvas 基础 API 讲起，手把手带你用纯 JavaScript + Canvas 2D 打造一个完整的飞机大战游戏，涵盖视差滚动、粒子特效、碰撞检测、难度递增等核心机制。

想要成为糕糕手

从零到一：CSS 3D 旋转立方体完全指南🌟 这是一篇带你亲手搭建 3D 旋转立方体的硬核笔记——从元素类型聊到 flex 布局，从定位深入 3D 变换，最后用动画让立方体转起来。全文逻辑闭环、图文并茂，读完你不仅能复刻经典案例，更能掌握一套举一反三的 CSS 3D 心法。建议收藏慢慢啃，边看边动手～ 🧩

用pixi.js实现fabric.js(七)：框选、ActiveObject和控制点前面我们已经实现了StaticCanvas，让我们能够看到各个元素出现在画布上的效果，然后我们实现了事件系统，让画布上的元素可以拖拽，但是，编辑器最重要的操作：编辑元素、框选元素等，我们还没有实现，而这一章，我们将逐步实现这些编辑功能，让这个画布的功能更加完善，进一步靠近fabric。

HTML5 Canvas 从入门到游戏实战HTML5 Canvas 是前端领域一块极具魅力的技术阵地——它把浏览器变成了一个像素级的画布，数据可视化、网页游戏、炫酷动效，都能在 Canvas 上施展拳脚。本文从零开始梳理 Canvas 的核心概念，并通过一个完整的飞机大战游戏和 ECharts 数据可视化案例，串联起 Canvas 的实用知识体系。

Darling噜啦啦

Canvas 游戏开发与数据可视化实战：从飞机大战到 ECharts 报表本文带你深入 HTML5 Canvas 的核心原理，从基础绘制到帧动画，从碰撞检测到完整游戏开发，再到 ECharts 数据可视化——一文掌握前端图形编程的两大核心场景。

【HTML】JavaScript Canvas 图像截取与保存完整指南在前端开发中，我们经常遇到这样的需求：需要从画布（Canvas）中截取特定区域，并将该区域保存为独立的图片文件。本文将详细介绍如何使用 JavaScript 实现这一功能，涵盖从图像绘制、区域选择、数据截取到最终保存下载的完整流程。

用pixi.js实现fabric.js(六)：从线性代数的角度理解编辑器交互在上一章中，我们已经实现了部分Canvas类的功能，但是仅仅是实现了事件系统相关的功能，还有很多交互功能，我们并没有实现，在实现这些交互功能之前，我们需要了解一些前置知识，以帮助理解如何实现这些交互功能。本文的目的，就是让大家来了解这些前置知识。

我做了一面互联网摸鱼墙：从无限 Canvas 到本地生产环境最近，我做了一个叫「摸鱼表格」的小项目。它看起来像表格，却没有表头、公式、筛选和工作任务。这里有的，只是一面可以无限拖动、缩放和探索的公共格子墙。

OpenClaw Canvas A2UI：AI驱动的交互式界面开发实战摘要：OpenClaw Canvas A2UI（AI-to-UI）是一种让AI智能体动态生成、推送和更新用户界面的创新机制。通过 a2ui_push 和 a2ui_reset 两个核心操作，AI可以在运行时将JSONL格式的界面描述推送到Canvas画布，实现表单、按钮、选择器、图表等交互组件的实时渲染。本文从A2UI概念出发，深入解析 a2ui_push 的JSONL数据格式与推送机制，剖析交互组件的事件处理模型，并通过交互式配置面板、实时数据监控仪表盘、AI驱动动态表单三个实战案例，展示A2UI在实际

OpenClaw Canvas 截图：页面捕获与保存本文详细介绍 OpenClaw Canvas 的截图功能。从基本截图、全页面捕获、元素截图到图像处理，全面解析如何通过 Canvas 实现灵活的页面捕获。通过实际案例演示报告生成、内容存档、错误记录等场景，帮助开发者掌握 Canvas 截图的实际应用。📸

如何使用Compose 绘制提升性能 —— 新手指南为界面绘制精细的装饰或自定义背景时，传统的Box嵌套往往会增加不必要的布局节点和性能开销。而利用Modifier.drawBehind、drawWithContent和drawWithCache，我们可以直接在DrawScope提供的画布上实现高性能、像素级精准的命令式绘制。

OpenClaw Canvas 执行：JavaScript 注入实战本文深入探讨 OpenClaw Canvas 的 JavaScript 执行功能。从基本执行、数据获取、DOM操作到高级应用，全面解析如何通过 eval 注入 JavaScript 实现灵活的界面控制。通过实际案例演示数据提取、动态更新、事件处理等场景，帮助开发者掌握 Canvas 的高级控制能力。⚡

用pixi.js实现fabric.js(五)：事件系统事件系统是一个渲染引擎最重要的功能之一，如果没有事件系统，这个渲染引擎将不可用。上一章里，我们已经实现了静态画布，用来绘制需要展示的元素，接下来我们将给这些元素绑定上事件，让这些元素可交互。

OpenClaw Canvas 导航：URL 加载与控制本文深入探讨 OpenClaw Canvas 的导航功能。从 URL 加载、页面控制、导航历史到高级导航技巧，全面解析如何通过 Canvas 实现灵活的页面导航。通过实际案例演示文档嵌入、工具集成、多页面切换等场景，帮助开发者构建具有导航能力的可视化应用。🧭

名字都不重要何况昵称

canvas 分层渲染思路和脏矩形处理大量静态背景 + 少量动态元素** 比如地图、数据可视化大屏、战棋游戏地图。静态地形、网格、标注画在底层，只需画一次；人物、光标、高亮效果在顶层单独刷新。这样可以大幅提升性能，尤其是静态层很复杂时。

只要微微辣

Uniapp 微信小程序 Canvas画框标注：拖拽缩放全攻略在很多业务场景中（比如 AI 视觉识别、隐患排查、票据信息提取等），我们需要在前端实现一个图片画框标注功能。用户拍完照或上传图片后，可以在图片上框选出特定的区域，并将该区域的坐标发送给后端进行处理。