canvas

HTML Canvas API 技术简述与关系性指南大家好，我是右子。一名喜爱编程的程序员。HTML5 引入的 <canvas\> 元素提供了一块用 JavaScript 动态绘制图形的画布，可用于绘制图表、游戏界面、动画和图像处理。Canvas API 是构建在 <canvas\> 元素之上的 2D 绘图接口，早在 2015 年就已被各大浏览器广泛实现【857656332093616†L561-L566】【857656332093616†L573-L574】。Safari 官方文档指出，Canvas “在 Safari 2.0 及更高版本以及其他大多数

Node.js 图形渲染库对比：node-canvas 与 @napi-rs/canvas在 Node.js 环境中实现图片和图表生成功能时，node-canvas和@napi-rs/canvas是两个常用的选择。这两个库都提供了基于 Canvas API 的图形渲染能力，但它们在底层实现、性能表现和功能特性上存在显著差异。本文将从性能、API 兼容性、社区支持和功能完整性四个维度，对这两个库进行全面对比，帮助开发者选择最适合自己项目需求的解决方案。

Canvas 高性能K线图，支持无限左右滑动用可以屏幕取色器，获取东方财富的配色 codeinword.com/eyedropper图一、图二，是参考东方财富黑白皮肤的配色，图三是参考腾讯自选股的配色。

ObjectX前端实验室

【图形编辑器架构】：无限画布标尺与网格系统实现解析发布日期：2025年10月3日｜预计阅读时间：30 分钟上一篇我们讲解了分层事件系统的设计，本篇我们将在事件系统的基础上实现无限画布、标尺、网格绘制，无限画布实际上只是理论上的无限，绘制的仅仅是视口区域，通过事件触发移动和缩放，重新计算视图矩阵，更新渲染

ObjectX前端实验室

【图形编辑器架构】：编辑器的 Canvas 分层事件系统发布日期：2025年10月3日｜预计阅读时间：25 分钟最近在重构编辑器 demo 的时候，我重新梳理了事件层的实现。在节点层 → 渲染层之后，本篇重点切换到交互事件系统，也就是 Canvas 如何处理复杂交互，如何设计一个类似 Figma 的独立事件架构。

风中凌乱的L

canvas 图片水印

HTML&CSS：在线电子签名工具该 HTML 文件是一个功能完整、跨设备兼容的在线电子签名工具，基于 HTML5 Canvas 实现签名绘制核心功能，搭配直观的样式控制（颜色、线条粗细）与操作按钮（清除、保存、下载），同时支持鼠标与触摸屏交互，整体设计简洁易用且视觉友好。

别让 “断字” 毁了 Canvas 界面！splitByGrapheme 轻松搞定非拉丁文本换行做前端 Canvas 文本开发时，你是否遇到过中文长文本无法自动换行，甚至字符被截断的尴尬？比如想在画布上展示一段产品介绍，结果 “你好” 被拆成 “你” 在第一行末尾、“好” 在第二行开头 ——Fabric.js 的 TextBox 搭配 splitByGrapheme 属性，正是解决这类问题的关键方案。

H5 电子签名组件今天学习一下如何手打一个电子签名组件。SignCanvas.vueH5基于canvas实现电子签名并生成PDF文档 - 掘金

小鱼儿亮亮

canvas中常见问题的解决方法及分析，踩坑填坑经历【出现条件】：这种情况一般是垂直或者水平的线，且坐标为整数，宽度不是偶数。【解决方法】：坐标偏移0.5像素。

普兰店拉马努金

【Canvas与图标】古铜色“HTML”图标

Cropper.js 轻松拿捏前端裁剪🤞作为一名前端程序员，在日常开发中经常会遇到需要处理图片的需求，其中图片裁剪是一个非常常见的功能点。无论是用户头像上传、商品图片处理还是内容管理系统中的图片编辑，一个好用的图片裁剪工具都能大大提升用户体验。今天我想和大家分享一个我在项目中经常使用的图片裁剪库 ——Cropper.js。

SVG 适合静态图，Canvas 适合大数据？图表库的场景选择在前端开发中，图表库的选择是面试中常被问及的问题。尤其是在涉及到高性能图形渲染时，Canvas 和 SVG 之间的权衡更是核心考点。今天，我们就来深入探讨一下，为什么现在主流的图表库（如 ECharts、AntV G2 等）大多采用 Canvas 方案，而不是 SVG。

德育处主任

p5.js 用 cylinder() 绘制 3D 圆柱体点赞 + 关注 + 收藏 = 学会了cylinder() 是 p5.js 中用于绘制3D 圆柱体的函数。圆柱体由顶部、底部两个圆形和侧面组成，所有表面由三角形拼接而成（这是 3D 绘图的常见方式）。

Fabric.js从0到1实现图片框选功能基于 Fabric.js 实现图片标注和区域选择功能，支持手动框选、预设区域、拖拽缩放等交互操作。

用 fabric.js 搞定电子签名拖拽合成图片上周组长甩过来一个需求：“客户要在合同图片上签电子签名，还得能拖着签名调整位置” 虽然是真的懵逼但也还是挤出一句 “好的，我看看”。查了一圈资料，发现 fabric.js 这玩意儿简直是为这种 Canvas 交互量身定做的，空谈理论不如上手实践，今天就把实现过程掰开揉碎了讲给大家。

德育处主任

p5.js 掌握圆锥体 cone点赞 + 关注 + 收藏 = 学会了cone() 是 p5.js 中用于绘制三维圆锥体的函数。它属于 p5.js 的 3D 绘图功能，允许你在 3D 空间中创建圆锥形状。对于初学者来说，这是进入 3D 绘图世界的绝佳起点。

德育处主任

p5.js 3D 形状 "预制工厂"——buildGeometry ()点赞 + 关注 + 收藏 = 学会了如果你已经会用box()、sphere()画简单 3D 形状，想组合它们做出复杂模型，又担心画面卡顿，那么buildGeometry()就是你的 "性能救星"。这个函数能把多个简单形状 "焊接" 成一个自定义 3D 模型，让绘制效率飙升。

德育处主任

p5.js 3D盒子的基础用法点赞 + 关注 + 收藏 = 学会了如果你刚接触 p5.js，想尝试 3D 绘图，那么box()函数绝对是你的入门首选。它能快速绘制出 3D 长方体（或正方体），配合简单的交互就能做出酷炫的 3D 效果。本文会从基础到进阶，带你吃透这个实用 API。

掘金安东尼

2分钟创建一个“不依赖任何外部库”的粒子动画背景本篇依然来自于我们的《前端周刊》项目！由团队成员掘金安东尼翻译，也就是本瓜咯，欢迎大家进群持续追踪全球最新前端资讯!!