如何在 HTML Canvas Circle 中居中图像？答案

【问题标题】：How to center an image in a HTML Canvas Circle?如何在 HTML Canvas Circle 中居中图像？
【发布时间】：2021-05-24 03:10:54
【问题描述】：

我对画布非常陌生，所以我对它的工作原理知之甚少。这是我在屏幕中间绘制的圆圈的代码。

      ctx.save();
      ctx.beginPath();
      ctx.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);

      ctx.strokeStyle = "#2465D3";
      ctx.stroke();
      ctx.clip();

      ctx.drawImage(imageFile, 200, 200, 500, 500);
      ctx.restore();
      ctx.stroke();

我想在圆圈内显示一张图片。图片显示在带有此代码的错误位置的圆圈中。我希望图片位于圆圈的中心，例如：

根据drawImage()的语法，我需要dx和dy在这个ctx.drawImage(image, dx, dy, dWidth, dHeight)中将图像正确定位在画布上（在圆的中心）。

我有什么办法可以将图片放在圆圈的中心而不做各种毕达哥拉斯计算？

我为什么要这样做？

我找不到适合图片的坐标并继续前进，因为圆的半径不是恒定的，因此无法正常工作。每次圆的半径发生变化时，我都需要为图片找到合适的坐标，以使图片保持在圆的中间。

我的思考过程是找到圆在这张图片中的正方形的角坐标

然后测量该点与画布宽度之间的距离。

我认为必须有更好的方法来做到这一点。有一个更好的方法吗？我在 React 应用程序中使用它。

【问题讨论】：

图像是否应该缩放以适合圆圈？
@GabrielePetrioli 是的，我希望图像的大小随着圆半径的变化而变化，使其与圆相匹配。如果你能告诉我，我将不胜感激。

标签： javascript html reactjs canvas html5-canvas

【解决方案1】：

您的 imagem 的 x 和 y 位置必须等于圆形。 imagem 的高度和宽度必须为 2r。

x = canvas.width / 2;
y = canvas.height / 2
ctx.save();
ctx.beginPath();
ctx.arc(x,y, radius, 0, 2 * Math.PI);

ctx.strokeStyle = "#2465D3";
ctx.stroke();
ctx.clip();

ctx.drawImage(imageFile, x, y, 2 * radius, 2 * radius);
ctx.restore();
ctx.stroke();

【讨论】：

谢谢，这有助于解决问题。

【解决方案2】：

这里canvas.width / 2 和canvas.height/ 2 是圆心的坐标。

      ctx.drawImage(
        oneMoreRound,
        canvas.width / 2,
        canvas.height / 2,
        radius * 2,
        radius * 2
      );

只有通过上面的代码，才能将图像的左上角放在圆的中心，如下所示：

从x 和y 坐标中减去半径，将图像的左上角置于圆将创建的正方形的左上角。如果图像是正方形，这会将图像放在正确的位置。

这就是解决方案

      ctx.drawImage(
        oneMoreRound,
        canvas.width / 2 - radius,
        canvas.height / 2 - radius,
        radius * 2,
        radius * 2
      );

【讨论】：