问题标签 [path-2d]

我正在画布上绘制一个 path2D SVG 形状。问题是 moveTo 函数在使用 SVG 数据时似乎不起作用。

这个代码笔说明了这个问题。 https://codepen.io/grasmachien/pen/rNaJeBN

有没有办法在不移动画布的情况下移动路径？

在 canvas 2D API 中，我们可以首先使用一个上下文的转换定义一个子路径，然后只为fill()orstroke()调用更改该上下文的转换，这将对样式fillStyle、likelineWidth和其他可见属性产生影响，但会留下子路径。定义的路径。当我们想要放大矢量形状同时保持相同的笔划宽度时，这非常方便。

这是一个简单的示例，其中只有lineWidth受可变缩放转换影响：

使用Path2D API，我们必须直接在ctx.fill(path)orctx.stroke(path)方法中传递这个子路径。
这意味着我们不能像以前那样将样式与子路径声明分开：

在使用这个原本方便的 Path2D API 时有没有办法做到这一点？

在我的画布上，我有两种类型的圆圈：

我直接从上下文中创建的那些（= decoratingStars）：

以及那些创建为 Path2D 的，因为我希望它们是可点击的（=planetPaths）：

现在我想使用 requestAnimationFrame 为这些圆圈设置动画。我的问题是这this.ctx.clearRect(0, 0, WIDTH_CANVAS, HEIGHT_CANVAS);似乎对 Path2D 对象没有影响，而它对其他对象有效。

还有另一种清除 Path2D 对象的方法吗？

编辑，这里是我的 updateCanvas 方法，以生成动画：

我不知道是否有人真正使用它，但我想使用DOMMatrix对象在 HTMLCanvas 2d 上下文上定位和缩放SVG 路径。

现在，由于某种原因 scaleSelf() 破坏了矩阵。对象属性用 NAN 填充。

缩放前

缩放后

有人解决了吗？（浏览器：火狐开发）

我正在尝试填充 HTML5 canvas.context 的 path2d 对象。

我根据这个网站绘制了一个自定义路径，它是一条贝塞尔曲线： https ://javascript.info/bezier-curve

但我无法让它填充纯色。

这是 jsfiddle 中的一些代码来说明我的问题。如果我取消注释该线//this.ctx.stroke(this.p2d);，则将绘制贝塞尔曲线的轮廓，但我似乎无法填充完整的路径。

https://jsfiddle.net/9oL4xw1b/2/

附言。这对我来说是高级数学，所以虽然我计算 x 和 y 的公式是正确的，但它可能没有得到适当的优化。

我需要画一条线并给它一个边框。

我试着画两条线，一条 5px 和 3px 以上

但这看起来并不像真正的边界

有没有更好的方法来绘制一条线的边框？

我正在尝试使用 JavaScript 在 HTML5 画布中的 Path2D 对象中找到一个点。

请理解，此代码已简化，并且我使用的路径不是通用形状，因此这需要适用于任何给定的 2d 路径。这不是关于语法的问题，所以请原谅未定义的变量。

我想检查给定点是否在不规则路径内部绘制的空间内 - 大脑内部（路径在下方）。

我似乎无法使用CanvasRenderingContext2D.isPointInPath(path, x, y)，因为它仅在该点实际上位于路径内（白色轮廓）时才返回 true。

我也不认为我可以使用奇数多边形规则，因为一个点可能不在边缘并且它的线仍然会偶数次撞击形状墙......

给定一个ImageData对象，是否有一个函数或算法来创建一个Path2D包含所有不透明像素的对象？

对于背景，我有一个低分辨率的光栅图像，它将用作一些更高分辨率的动态内容的掩码。虽然我可以使用临时画布和globalCompositeOperation各种类型来实现这一目标，但我更喜欢使用clip()路径 - 我怀疑它会更有效。蒙版图像不会经常更改，因此路径可以在计算后多次重复使用。