HTML5画布，多边形上/中的图像可能吗？答案

【问题标题】：HTML5 canvas, image on/in polygon possible?HTML5画布，多边形上/中的图像可能吗？
【发布时间】：2012-05-19 02:28:27
【问题描述】：

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

【问题讨论】：

简短回答：是的。你尝试了什么？
我尝试过使用 context.drawImage 但我认为无法使用这种方法指定所有四个 x,y 位置
我记得你的other question，这很可能是重复的……但我确实做了几个小时的研究。有可能..如果您想剪辑图像。我不确定是否可以操纵图像。
@Joseph OP 应该尝试什么？ drawImage 的文档对多边形只字不提，fillStyle 的文档对图像只字不提。我相信可能存在一些关于裁剪或设置多边形边界的事情，但在事先不知道的情况下，没有什么可以尝试的。
@mgibsonbr 如果你用谷歌搜索的话，会有很多教程。

【解决方案1】：

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

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

然后只需创建多边形（使用moveTo 和lineTo）然后正常填充它。

来源：this plugin 的源代码。免责声明：我自己没有尝试过确认它有效。

更新：我仍在调查您是否可以操纵图像以适应任意多边形。原则上，您可以使用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 变换中引用 this post：

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

有CSS 3D Transforms 的计划，但不仅我不知道它的支持范围有多广，我不知道画布元素（具有 2d 上下文，即 WebGL 是另一个故事）是否会支持它。简而言之，通过我所知道的任何方式，都不可能为所欲为。

【讨论】：

我真的不确定这是否是 OP 想要的；我建议您查看我对他们问题的评论。
@Daedalus 是的，我已经阅读了您的 cmets（包括此处和副本），我正在回答，因为：a）它可能确实是 OP 想要的； b) 直到今天我才知道这件事，这也是我感兴趣的事情。无论如何，我会进一步研究这个主题，使用上下文的转换也可以进行一些操作。
很好的方法，虽然它不遵循每个对象自己的位置。它使每个对象看起来都是透明的，您可以看到背景。
@Forested 我不确定你的意思。您是否要对图像进行变形（变形），以便原始图像中的每个顶点都映射到生成的多边形中的一个顶点？（后面的中间点）如果是这样，请参阅我的更新，我仍然没有得到很好的答案。如果是其他问题，请澄清。
是的，这就是您目前正在研究的内容！

【解决方案2】：

您可以使用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();
  }

【讨论】：

这不是在多边形上绘制纹理。这会将图像剪辑到该多边形...