📄️ 圆弧
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制圆弧。使用 Konva.Arc 图形设置内外半径、角度和顺时针方向。
📄️ 箭头
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制箭头。使用 Konva.Arrow 图形创建可自定义指针、描边和填充的箭头。
📄️ 圆形
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制圆形 。使用 Konva.Circle 图形设置半径、填充、描边、不透明度和阴影。
📄️ 自定义图形
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制自定义图形。使用 Konva.Shape 的 sceneFunc 和原生 Canvas 2D 上下文创建任意图形。
📄️ 椭圆
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制椭圆。使用 Konva.Ellipse 图形设置 radiusX、radiusY、填充、描边等属性。
📄️ 组
学习如何使用 Konva.js 对 HTML5 Canvas 图形进行分组。使用 Konva.Group 一起移动、旋转和缩放多个图形。
📄️ 图像
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制图像。使用 Konva.Image 图形从 URL 加载、裁剪和调整图像,并应用滤镜。
📄️ 标签
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制带文本和标记的标签。使用 Konva.Label 图形创建工具提示、标注框和注释。
📄️ 线条
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制线条。使用 Konva.Line 图形创建简单线条、样条曲线、多边形和 Blob 图形。
📄️ 线条 - Blob 图形
学习如何使用 Konva 在 HTML5 Canvas 上绘制 Blob 图形,以及如何为 Konva.Line 使用 closed 和 tension 属性。
📄️ 线条 - 多边形
学习如何使用 Konva 在 HTML5 Canvas 上绘制多边形,以及如何将 Konva.Line 的 closed 属性设置为 true。
📄️ 线条 - 简单线条
学习如何使用 Konva.Line 在 HTML5 Canvas 上绘制简单线条、虚线和点线。
📄️ 线条 - 样条曲线
学习如何使用 Konva 在 HTML5 Canvas 上绘制平滑的样条曲线,以及如何为 Konva.Line 使用 tension 属性。
📄️ 路径
学习如何使用 Konva.js 和 SVG 路径数据在 HTML5 Canvas 上绘制自定义路径。使用 Konva.Path 图形创建复杂图形。
📄️ 矩形
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制矩形。使用 Konva.Rect 图形设置填充、描边、尺寸、位置、圆角、阴影等属性。
📄️ 正多边形
学习如何使用 Konva.js 的 Konva.RegularPolygon 图形,在 HTML5 Canvas 上绘制三角形、五边形和六边形等正多边形。
📄️ 圆环
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制圆环。使用 Konva.Ring 图形设置内半径和外半径。
📄️ 精灵
学习如何使用 Konva.js 在 HTML5 Canvas 上通过精灵图制作动画。使用 Konva.Sprite 图形播放逐帧动画。
📄️ 星形
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制星形。使用 Konva.Star 图形设置内外半径、顶点数、填充和描边。
📄️ 文本
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制文本。使用 Konva.Text 图形设置字体、字号、样式、对齐、换行、内边距和装饰。
📄️ 路径文本
学习如何使用 Konva.js 沿路径在 HTML5 Canvas 上绘制文本。使用 Konva.TextPath 图形渲染曲线文本或环形文本。
📄️ 扇形
学习如何使用 Konva.js 在 HTML5 Canvas 上绘制扇形。使用 Konva.Wedge 图形设置角度、半径和旋转角度。