如何在旋转的画布矩形中填充图像。

Question

如何在旋转的画布矩形中填充图像。

4

我的画布上有4个矩形，我想用一张图片填充每个矩形，例如使用i1.png。画布已经旋转并且缩放，当我旋转图像时，它们不在原来的位置上。我该如何解决？

代码：

    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    </head>
    <body bgcolor="black">
    <canvas id="tutorial" width="500" height="500"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("tutorial"),
  ctx = canvas.getContext("2d"),
rects = [
    {x: 0, y: 0, w: 100, h: 100},
    {x: 0, y: 100, w: 100, h: 100},
    {x: 100, y: 100, w: 100, h: 100},
    {x: 100, y: 0, w: 100, h: 100}
],
  i = 0,
  r;
ctx.translate(500, 500);
ctx.scale(0.71, 0.3834);
ctx.rotate(-0.25 * Math.PI);

canvas.onmousemove = function(e) {
  var rect = this.getBoundingClientRect(),
    x = e.clientX - rect.left,
    y = e.clientY - rect.top,
    i = 0,
    r;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  while (r = rects[i++]) {
    ctx.beginPath();
    ctx.rect(r.x, r.y, r.w, r.h);
 ctx.fillStyle = "#c5de89";
    ctx.fill();
 if(ctx.isPointInPath(x, y)) {
  ctx.strokeStyle = "white";
  ctx.lineWidth = 5;
  ctx.strokeRect(r.x + 5, r.y + 5, r.w - 10, r.h - 10);
  ctx.save();
  base_image = new Image();
  base_image.src = 'https://istack.dev59.com/D3HBL.webp';
  ctx.rotate(0.25 * Math.PI);
  //console.log(base_image.width);
  ctx.drawImage(base_image, 0, 0, base_image.width, base_image.height , r.x , r.y , r.w , r.h);
  ctx.restore()
 } else {
  ctx.fillStyle = "#c5de89";
 }
    ctx.save();
    ctx.restore()
  }
};
</script>
    </body>
    </html>

我的代码结果：

我想要这样填充我的矩形：

这是我们用于此示例的 i1.png ：

更多细节（编辑）：

我正在尝试创建一个游戏地图，实际上他们创建了一个画布并旋转了它。我想将我的图像附加到每个矩形而不进行任何旋转。我认为形状并不重要，我只想在每个矩形上设置一个图像，而不旋转，但是当我这样做时，它们不再在原来的位置！看看第二张照片，我想创建类似于这样的东西。我希望这张图片能够清楚地表达目的，我们将每个地图块分成 i.stack.imgur.com/kFN6G.jpg ，不考虑我的代码，认为我们想将一个图像层附加到我们的形状上！

- Rmanx77

你在一个地方调用了save()、rotate()和restore()，但在这些函数之间并没有进行任何绘图操作。那么这段代码的预期目的是什么？ - scg

@scg 那部分是额外的，在测试期间编写的，你可以跳过它。 - Rmanx77

1

好的。这并不是要批评什么，但如果您能从示例中删除任何这样的多余代码，对于读者来说可能会更容易。这样我们就不必试图弄清楚什么是和什么不是相关的了。 - scg

@Rishab，你能帮我解决这个问题吗？ - Rmanx77

@Sunil的帖子已编辑。 - Rmanx77

显示剩余6条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sunil Chaudhary · Accepted Answer

尝试使用正方形照片来实现相同的效果

说明：画布上的绿色菱形原本是正方形，照片也是正方形（保持相同的纵横比等）。因此，对正方形进行的所有几何操作都会自动应用于照片，可以快速地实现所需结果，而不需要对图像进行任何操作。

    <html>
    <head>
    <script src="jquery-3.4.1.js"></script>
    </head>
    <body bgcolor="black">
    <canvas id="tutorial" width="500" height="500"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById("tutorial"),
      ctx = canvas.getContext("2d"),
    rects = [
        {x: 0, y: 0, w: 100, h: 100},
        {x: 0, y: 100, w: 100, h: 100},
        {x: 100, y: 100, w: 100, h: 100},
        {x: 100, y: 0, w: 100, h: 100}
    ],
      i = 0,
      r;
    ctx.translate(canvas.width / 2, canvas.height / 2);
    ctx.scale(0.71, 0.3834);
    ctx.rotate(-0.25 * Math.PI);

    canvas.onmousemove = function(e) {
      var rect = this.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0,
        r;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      while (r = rects[i++]) {
        ctx.beginPath();
        ctx.rect(r.x, r.y, r.w, r.h);
        ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "#c5de89";
        ctx.fill();
        ctx.save();
    
        base_image = new Image();
        base_image.src = 'https://istack.dev59.com/d6VAh.webp';
     //ctx.rotate(0.25 * Math.PI);
        ctx.drawImage(base_image, r.x, r.y, r.w , r.h);
        ctx.restore()
      }
    };
    </script>
    </body>
    </html>

如果有帮助，请告诉我。