HTML画布 - 绘制弯曲的箭头

箭头符号是一种非常基础的绘图元素，在HTML中可以使用<span>标签来创建箭头。但是，由于<span>标签不支持CSS样式，因此我们无法通过它来创建具有弯曲效果的箭头。

为了在HTML中绘制弯曲的箭头，我们需要使用SVG（可缩放矢量图形）标签。SVG是一种基于XML的矢量图形格式，可以在浏览器中呈现出来，并且支持各种形状的绘制，包括箭头。

在HTML中，我们可以使用<svg>标签来创建SVG图形。以下是一个示例代码，可以在浏览器中绘制一个带有弯曲效果的箭头：

<svg width="200" height="200">
  <path d="M 50 99
           C 42 80, 27 63, 52 56
           C 30 46, 22 26, 40 16
           C 54 6, 70 9, 82 14
           C 105 3, 130 18, 125 43
           C 144 52, 145 75, 127 89
           C 142 97, 137 119, 116 117
           C 98 127, 76 130, 60 121
           C 52 129, 32 139, 17 126
           C 6 113, 13 94, 27 85
           C 23 77, 28 67, 37 63" 
        stroke="black"
        fill="none" />
</svg>

上述代码中，<path>标签定义了箭头的路径形状，d属性中的M指令表示箭头的起点，C指令表示箭头的曲线，stroke属性表示箭头的描边颜色，fill属性表示箭头的填充颜色。

当然，这只是一个非常简单的示例，如果你想要绘制更加复杂的箭头，可以使用更复杂的SVG代码，例如，你可以使用多个<path>标签来定义箭头的不同部分，或者使用<polygon>标签来定义多边形箭头。

页面内容是否对你有帮助？

有帮助

没帮助

HTML画布-绘制弯曲箭头

html、canvas、html5-canvas、draw

我正试着在html画布上画曲线箭头。我可以画一条曲线，但我不知道如何将>放在线的末尾(方向)。this.fromY);ctx.stroke();下图是为了更好地理解。

浏览 1提问于2011-07-05得票数 10

回答已采纳

2回答

如何使用HTML5绘制弯曲的虚线箭头并对其进行动画处理

html、html5-canvas

我的目标是在html5画布上创建一个像这样的弯曲箭头：我找到了几个关于如何绘制线条的资源，但似乎没有一个管用。我还找到了一个相关的。另外，有没有可能在悬停时设置它的动画，以便扩展箭头，也许使用弹性效果？

浏览 3提问于2012-05-11得票数 3

回答已采纳

1回答

如何在Javascript中绘制虚线路径

javascript

我需要绘制一个砖块弯曲的路径，但我需要能够通过API将箭头指向任何一个砖头。就像这样：我想使用画布，但我不确定我能否得到每一个砖头和火灾事件的参考。

浏览 0提问于2018-10-01得票数 0

2回答

我想用画布html5绘制矩形，但这个矩形弯曲了拱形，如图所示

html、canvas

我想用画布html5绘制矩形，但这个矩形弯曲了拱形，如图所示

浏览 0提问于2016-02-21得票数 0

1回答

如何使用matplotlib创建曲线(左或右)-arrow？

python、matplotlib、plot

我正在使用在点之间绘制箭头。通过更改*shape*: ['full', 'left', 'right']，我可以创建全箭头、左箭头或右箭头。箭头应该看起来像，但是我

浏览 1提问于2011-12-30得票数 1

2回答

在HTML画布上绘制自交多边形

javascript、html、canvas、polygon、fill

我正在寻找一种方法来绘制一个带洞的自交多边形，我正在使用HTML画布元素。注意:我不想使用直线交叉点和添加更多的点来这样做，我将使用的实际路径将是弯曲的。

浏览 3提问于2010-01-27得票数 6

2回答

动态创建bezier曲线？

javascript、html、canvas、html5-canvas、bezier

我试着用三次bezier曲线在直线上弯曲，.I用Bezier曲线创建了一条直线，现在我想从top.But中弯曲它，现在我面临的问题是，当我用mousemove创建弯曲时，一系列的曲线出现给画布一种我不想要的油漆我只想要一个单一的弯曲line.My问题是，我如何清除之前绘制的线条，恢复最近弯曲的曲线？我的代码：

浏览 4提问于2013-05-27得票数 0

回答已采纳

1回答

如何在画布上绘图(用鼠标/触摸)，保存绘制的对象，存储，加载和操作？

javascript、html、canvas、svg

我想知道是否有任何框架允许我存储画布绘制的对象，加载和操作，或者如果没有，如何进行这样的过程(如果可能的话)。我的目标是采取以下步骤：将绘制的对象加载到画布上，并能够操纵它(弯曲一行p.e

浏览 2提问于2013-12-13得票数 1

回答已采纳

1回答

在Python底图中绘制曲线

python、matplotlib、matplotlib-basemap

我想在底图地图上绘制曲线/弧线。我可以使用map.plot(x，y，..)绘制一条直线，但是如何使它弯曲/具有箭头？

浏览 0提问于2010-12-15得票数 4

回答已采纳

1回答

Matplotlib:如何将箭头添加到路径修补程序中？

python、matplotlib

[Path.MOVETO, Path.CURVE3, Path.CURVE3]),fc="none", transform=ax1.transData)它给了我弯曲的边缘，如下图所示：如何将箭头添加到这些弯曲边的末尾/开始/中间？我做了一点点搜索，并绘制了其他补丁，其中包含箭头。我试过了，但是将它们与我的路径补丁对齐，结果证明是不平凡的。我想知道是

浏览 0提问于2018-04-30得票数 1

回答已采纳

1回答