html5 canvas 怎么绘制不规则矢量图

Posted 2023-03-18

html5 <canvas> 标签用于绘制图像（通过脚本，通常是 javascript）。
不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
本手册提供完整的 getContext("2d") 对象属性和方法，可用于在画布上绘制文本、线条、矩形、圆形等等。

正如上面所说，你需要制作无数的规则图形组合到一起变成不规则图形。
操作可以说是相当复杂。建议你可以用HYPE3实验下，如果你想做HTML5动画的话。
如果你只是想研究，请看：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html 参考技术A canvas提供了直线，曲线，圆的画法，不规则图只有你自己把他们分别写然后用
moveTo(x,y) 从x,y开始绘制
lineTo(x,y)
连起来stroke（），就是一完整的图了

用渐变（或纯色）填充特定的可绘制矢量

【中文标题】用渐变（或纯色）填充特定的可绘制矢量

【英文标题】：Fill a particular vector drawable with a gradient (or a solid color)

【发布时间】：2021-10-28 13:33:44

【问题描述】：

好的，所以我有一个矢量可绘制对象，它是由paths 组合而成的不规则形状，我需要填充背景。现在，我该怎么做呢？

例如，由四个路径组成的简单正方形

108 x 108 画布：-

<path 
      android:pathData="M10,10 98, 10"/>


<path 
      android:pathData="M98,10 98, 98"/>

<path 
      android:pathData="M98,98 10, 98"/>

<path 
      android:pathData="M10,98 10, 10"/>

现在我该如何填充这个形状？

谢谢

PS：如果有替代方案，我可以使用 jetpack compose 以声明方式执行此操作。

PPS：请注意，这只是一个例子，而我的实际形状是高度不对称的（几何上），大约由 10 个paths 组成

【问题讨论】：

你说的是fill还是stroke。如果填充，路径之间的区域是否应该被填充？

这正是我想要的。

色调怎么样？

【参考方案1】：

我认为您唯一的选择是将不同的路径合并为一个。在这里我已经完成了，删除了“M”并在最后添加了一个“z”。

svg>path 
  stroke: navy;
  stroke-width: 2;

<svg viewBox="0 0 100 100"  >
  <path d="M10,10 98, 10"/>
  <path d="M98,10 98, 98"/>
  <path d="M98,98 10, 98"/>
  <path d="M10,98 10, 10"/>
</svg>

<svg viewBox="0 0 100 100"  >
  <defs>
    <linearGradient id="g1">
      <stop offset="0%"   stop-color="purple" />
      <stop offset="100%" stop-color="orange" />
    </linearGradient>
  </defs>
  <path d="M10,10 98,10 98,10 98,98 98,98 10,98 10,98 10,10 z" fill="url(#g1)"/>
</svg>

【讨论】：

如果在路径起点（“M x,y”）和几个点之后没有指令，默认使用什么-“L”？我的意思是直线的绝对坐标？

@Leonid 我想是的。在d - SVG: Scalable Vector Graphics | MDN 上说：“任何后续坐标对都被解释为隐式绝对 LineTo (L) 命令的参数”。