HTML5画布，可以在多边形上/在多边形中显示图像

HTML5 canvas, image on/in polygon possible?

本文关键字：多边形 显示 显示图 图像 画布 HTML5      更新时间：2023-09-26

有没有办法使用javascript html5画布，有一个多边形，然后在其中显示图像而不是颜色？

经过一些研究，我相信可以通过首先使用您的图像创建一个模式，然后将该模式设置为 fillStyle 来做到这一点：

var ctx = canvas.getContext("2d");
var pattern = ctx.createPattern(imageObj, "repeat");
ctx.fillStyle = pattern;

然后只需创建多边形(使用 moveTo 和 lineTo (，然后正常填充即可。

来源：此插件的源代码。免责声明：我自己还没有尝试过以确认有效。

更新：我仍在调查您是否可以操纵图像以适合任意多边形。原则上，您可以使用setTransform来执行此操作：

ctx.save();
ctx.setTransform(m11, m12, m21, m22, dx, dy);
ctx.drawImage(imageObj);
ctx.restore();

确定setTransform参数的值(如果可以的话(是棘手的部分。自从我做过任何数学以来，它已经很糟糕了，但是如果我没记错的话，这是需要做的事情：

(0,0) --- (w,0)       (x1,y1) --- (x2,y2)
  |         |            |           |
  |  Image  |     =>     |  Morphed  |
  |         |            |           |
(0,h) --- (w,h)       (x3,y3) --- (x4,y4)

对于每个点，您将执行以下矩阵运算：

|m11 m21 dx|   |xI|   |xM|
|m12 m22 dy| X |yI| = |yM|
| 0   0   1|   | 1|   | 1|

八个方程，六个变量(请记住矩阵元素是变量，其余的是常量 - 我们的输入(。可能无法解决。现在只需要推断(或谷歌搜索，或询问 Math.SE...(并实现每个参数的公式......

更新2：虽然我没有确凿的证据，但我相信用setTransform做你想做的事是不可能的。看看 Gimp 如何使用其"透视"工具，还需要更改转换矩阵的第三行以将您的图像转换为任意多边形。而 Canvas API 似乎没有为此提供方法(通常只支持仿射变换：平移、旋转、缩放、剪切或上述组合(。

引用这篇关于 2D 转换的文章：

CSS3 2D变换只能将块转换为平行四边形。例如，不可能将块转换为以下形状： [不规则形状] 为此，必须使用 CSS3 3D 变换。这就是为什么矩阵构造集只有三个控制点可以拖动，而不是四个。

有CSS 3D转换的计划，但不仅我不知道它有多广泛支持，我不知道画布元素(带有2d上下文，也就是说 - WebGL是另一个故事(是否会支持它。简而言之，通过我所知道的任何方式都不可能做你想做的事。

您可以使用

context.clip()用图像填充多边形：

  //create an image
  var img = new Image();
  img.src = 'imgPath/image.png'
  //draw the image when loaded
  img.onload = function(){
      var ctx = canvas.getContext("2d");
      ctx.save();
      //define the polygon
      ctx.beginPath();
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2);
      ctx.lineTo(x3,y3);
      ctx.closePath();
      //draw the image
      ctx.clip();
      ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight);
      //fill and stroke are still available for overlays and borders
      ctx.fill();
      ctx.stroke();
      ctx.restore();
  }

如果你只想要常规多边形，那么你可以使用这个仅限 CSS 的工具而不是画布(免责声明，我写的(https://html-polygon.com

虽然它只是为 React 和 Vue 构建的，但您可以使用该站点上的播放工具并获取生成的 HTML。

相关文章：