说明

Question

我想使用HTMLCanvas元素将矩形图像变成圆形。（最后，我只需要圆的上半部分，但是将生成的圆切成两半就可以轻松解决。）

从此

对此

我的想法是做一个简单的逐行转换。到目前为止，我只有基本的绘图逻辑，但是我完全不了解转换的数学原理。

<!DOCTYPE html>
<body>
    <canvas id="canvas"></canvas>
</body>

<script type="text/javascript">
var img = new Image();
img.onload = function init() {
    var img = this;
    var imgH = img.height;
    var imgW = img.width;

    // make the canvas the same size as the image.
    var c = document.getElementById("canvas");
    c.width = imgW;
    c.height = imgH;

    var ctx = c.getContext("2d");
    var halfHeight = imgH/2;

    // draw the upper part
    // line by line
    for(var i = 0; i < halfHeight; i++) {
        // I'm totally lost here.

        // current output without transformation
        ctx.drawImage(img, 0, i, imgW, 1, 0, i, imgW, 1);
    }

    // add the second half which must not be transformed
    ctx.drawImage(img, 0, halfHeight, imgW, halfHeight, 0, halfHeight, imgW, halfHeight);
};
img.src = "https://i.stack.imgur.com/52TjZ.png";

</script>
</html>

小提琴 https://jsfiddle.net/kirschkern/amq7t6ru/2/

（我在纯JS和2d中都需要它。没有three.js，没有webgl。）

我们非常感谢您的帮助。

Answer 1

我不太了解Javascript，但是由于这似乎是一个数学问题，所以我会出手。

替换行

console.log()

使用

render()

这会使图像的上半部分变形为椭圆形（仅当您输入的图像为正方形时，圆才起作用）：

这能解决您的问题吗？

说明

我从Wikipedia取了一个椭圆的转移方程，并将 c1 和 a 设置为等于// I'm totally lost here. // current output without transformation ctx.drawImage(img, 0, i, imgW, 1, 0, i, imgW, 1);和 c2 和 b 转换为 imgH / 2 。以var xMargin = -Math.sqrt(1-Math.pow((i-halfHeight)/halfHeight,2))*imgW/2+imgW/2; ctx.drawImage(img, 0, i, imgW, 1, xMargin, i, imgW-(2*xMargin), 1);为 y 来计算 x ；我将其中一个解决方案另存为imgW/2。图片在给定的垂直坐标处的宽度将是原始宽度减去边缘的两倍。

最后，我用这些输入喂i，请参阅documentation。

Answer 2

普通的2D JavaScript没有这样的图元来使图像变形。因此，简单的drawImage是不够的。

您可以做的是大概的事情。编写一个函数，该函数针对变形图像中的每个点（带有圆圈的那个点）计算原始图像中的相应位置。然后，您可以按照增加工作量和提高质量的方式执行以下四项操作之一。

遍历目标图像中的所有像素，并在源图像中查找相应的像素值。
像以前一样，但是具有二次采样功能：在源像素的正方形内占据多个位置，然后对重新贴合的颜色进行平均以得到更平滑的外观。
在给定点上近似仿射变换（为此，您可能需要映射函数的偏导数）并用它绘制仿射变换的图像。
与3相同，但具有射影而不是仿射变换。可以说，这将使其成为3D模型。
类似于1或2，但在WebGL中将所有这些实现为片段着色器。我知道您说过您不想要那样，但是就性能和最终质量而言，这应该能带来最佳效果。

如何将矩形转换成圆形

2 个答案:

说明