首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
Canvas
涂兵兵_青石疏影
创建于2026-04-17
订阅专栏
开心的一个系列,因为可以用它开心
暂无订阅
共18篇文章
创建于2026-04-17
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
矩阵
理解 Canvas 的矩阵乘法,是掌握其高级绘图能力的钥匙。它揭示了所有变换(平移、旋转、缩放)背后的统一数学原理,让你能够以编程的方式精确控制坐标系。 🧮 Canvas 矩阵乘法详解 在 Canva
beginPath-vs-save详解
Canvas 中的 beginPath() 与 save()/restore() 详解 一句话总结 beginPath() save() 作用对象 当前路径(草稿本) 绘图状态(属性) 类比 橡皮擦擦
合成与裁剪
Canvas 合成与裁剪 超详细讲解 Canvas 的**合成(Compositing)和裁剪(Clip)**是实现高级视觉效果的核心技术,我会把 全局合成、透明度合成、路径裁剪 拆解得通俗易懂,附带
状态管理
Canvas 状态管理与变换(移动、缩放、旋转)+ 矩阵变换 超详细解析 Canvas 2D 渲染上下文(CanvasRenderingContext2D)的状态管理和坐标变换是绘制复杂图形、动画、图
像素级操作
Canvas 像素级操作 超详细讲解 Canvas 像素级操作是直接读写画布上每一个像素的颜色数据,能实现滤镜、图像合成、像素检测、粒子效果、截图处理等高级功能,是 Canvas 进阶核心能力。 我会
样式-径向渐变-3D球
3D 球效果实现原理分析 核心代码 一、createRadialGradient 的双圆定义 createRadialGradient(x1, y1, r1, x2, y2, r2) 参数解析: 参数
样式-案例
1.样式-区域 2.样式-描边 3.样式-纹理 4.样式-着色方式 5.样式-3d球 6.分离圆案例 7.径向渐变实验 8.渐变实验验证test
样式-径向渐变
一、径向渐变的核心原理 1. 基本定义 径向渐变通过两个圆(起始圆和结束圆)定义渐变范围: 起始圆:圆心 (x0, y0),半径 r0(通常较小,甚至为0) 结束圆:圆心 (x1, y1),半径 r1
样式
在 HTML5 Canvas 中,为图形添加颜色、描边和投影等效果,主要通过配置其 2D 渲染上下文(CanvasRenderingContext2D)的属性来实现。下面将为你详细讲解这四个方面。 🎨
文本
一 🎨 核心文本属性 Canvas 的文本样式和对齐由以下几个关键属性控制,它们都作用于 Canvas 的 2D 渲染上下文(通常简称为 ctx)。 1. font 属性 这是设置文本字体样式的核心属
绘制图像-clip方法
1.前言 绘制图像,之前我们介绍过drawImage方法 参数 含义 坐标系 300, 20 源图裁切起点 相对于图片左上角 (0,0) 500, 460 源图裁切大小 相对于图片 20, 20 画布
绘制图像-drawImage方法
绘制图像 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 是 Canvas 中功能最强大的图像绘制 API
线宽
为什么 1px 线条要 +0.5 才清晰?这个问题问到了 Canvas 渲染最本质的像素原理,我用最简单、最直观的方式给你讲明白: 为什么 1px 线条要 +0.5 才清晰? 一句话结论: 因为 Ca
canvas性能建议
性能建议 使用路径:绘制大量相同样式矩形时,用路径批量绘制处理 尽量减少,比如 fillRect 和 strokeRect 的调用次数 避免频繁样式切换:相同样式的矩形一起绘制 按颜色分组绘制是Can
绘制路径
一、路径(Path)与子路径(Subpath) 1. 什么是路径? 是当前所有子路径的集合。 在任意时刻,Canvas 上下文中只存在一个“当前路径”。 Canvas 里所有非矩形的图形,都必须用路径
绘制矩形
Canvas 矩形绘制三方法详解 Canvas 提供了填充矩形、描边矩形、清理矩形三个核心矩形绘制方法,它们的作用、视觉效果、使用场景完全不同,我用最直观的方式给你对比清楚。 一、基础语法(统一参数)
canvas坐标系
Canvas 的坐标系可以理解为以像素为单位,原点在左上角的数学坐标系。 核心规则 原点位置:原点 (0,0) 位于画布的左上角。 轴方向: X 轴:水平向右为正方向。 Y 轴:垂直向下为正方向。 单
绘制
将canvas理解成一个画板 canvas 绘图的步骤: 建立canvas 画布。 通过canvas 画布获取上下文对象,也就是画笔。 设置画笔颜色。 设置图形形状。 绘制图形。 1. fillSty