canvas

🚀 手把手用 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 视觉识别、隐患排查、票据信息提取等），我们需要在前端实现一个图片画框标注功能。用户拍完照或上传图片后，可以在图片上框选出特定的区域，并将该区域的坐标发送给后端进行处理。

用pixi.js实现fabric.js(四)：StaticCanvasStaticCanvas是fabric提供的静态画布，仅用来绘制内容，而无法与元素进行交互，未来要实现的Canvas(可交互画布)基于这个类，本文将解析如何用pixi实现这个类。

狼丶宇先森

vue-sign-canvas v2 重构复盘：从 Vue 2 签名板到 Vue 3 + TypeScript 组件库vue-sign-canvas 最初是一个面向 Vue 2 的手写签名板组件，核心目标很直接：让用户可以在 PC 或移动端完成签名，并导出 base64 图片。随着使用场景变多，旧版本逐渐暴露出一些维护和能力边界上的问题，例如移动端触点偏移、空签名校验不够明确、回显后继续编辑不稳定、导出格式处理不完整，以及组件内部逻辑越来越难维护。

OpenClaw Canvas：可视化界面入门本文介绍 OpenClaw 框架中的 Canvas 可视化界面功能。从 Canvas 基本概念、核心操作、界面展示到实际应用，全面解析如何通过 AI Agent 创建和管理可视化界面。通过实际案例演示网页嵌入、自定义界面、交互式应用等场景，帮助开发者构建具有可视化能力的智能应用。🎨

名字都不重要何况昵称

canvas 元素拾取在 2D 画布应用中，需要判断用户点击/悬停的是哪一个可交互元素。常见解决方案包括：关于 colorPick 可以参考我的另外一篇文章 colorPick