canvas

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

百万蹄蹄向前冲

让AI写2D格斗游戏，坏了我成测试了大家猜一下哪个是 Trae SOLO做的，哪个是DeepSeek做的。话说可以多用几个AI做同样的游戏，让玩家猜哪个AI做的作品

用户251916242711

Canvas之画图板先设计好基本的画布，以及需要的 css 和 html 。接着就是根据 html 来添加相应的点击事件。前面几个可以合并为一个点击事件，只需要在切换属性时切换相关的自定义属性。在保存图片时，先创建 base64 图片数据，然后将锚点的链接指向图片数据，这时当模拟点击时就会触发下载。记得在下载完成后移除锚点。

玩转Canvas：从静态图像到动态动画的奇妙之旅大家好，我是FogLetter，今天要和大家分享一个前端开发中非常有趣的话题——Canvas画布技术。Canvas就像是网页上的一个神奇画板，我们可以用JavaScript在上面绘制各种图形、动画甚至开发游戏。下面我就带大家一起探索Canvas的奥秘！

用户251916242711

Canvas之贪吃蛇贪吃蛇包括棋盘，蛇（蛇头和身体），食物。棋盘作为静态的，其他设置为动态。定义每个格子大小，绘制竖线和横线。

用户251916242711

Canvas之粒子烟花需要有烟花主体，上升的小球，烟花绽放的粒子。这些都是一个个对象，所以使用面向对象的结构。烟花是由一排小球组成。先调整坐标系，变成向上的坐标系。这些小球的y坐标不断减小，半径也在不断减小，达成了尖角的形状。然后随着时间不断上升。小球需要与圆相关的参数，当然不一定必须是圆形。绘制函数里同样需要保存和重置。

普兰店拉马努金

【Canvas与文字】生存与生活

敲敲敲敲暴你脑袋

用canvas绘制兰伯特投影地图最近有个需求，需要使用自然资源部的中国地势图作为底图绘制地图，不是墨卡托投影，没搞过这种投影，emmm~头大！

用户251916242711

Canvas之图形变换图形变换可以分为移动，旋转，放缩，以及矩阵斜切。这里模拟了一个坐标系，可以看到，当使用 ctx.translate 时，整个坐标系都会进行移动，第一个参数是x偏移，第二个参数是y偏移。这种移动是进行位置变化，是瞬间完成的，不是动画。当整个坐标系都跟着移动时，可以发现，设置在 translate 之前的图形不受影响，并没有发生移动。