HTML5 Canvas Ellipse Outline 变形后变形答案

【问题标题】：HTML5 Canvas Ellipse Outline Becomes Distorted As TransformedHTML5 Canvas Ellipse Outline 变形后变形
【发布时间】：2017-06-22 16:47:55
【问题描述】：

当我变换 HTML5 画布上下文并绘制椭圆时，随着变换变大，椭圆轮廓会完全扭曲。下面是一些示例代码以及我在 Firefox 和 Chrome 中看到的结果。

<body>
    <canvas id="myCanvas" width=900 height=900></canvas>
    <script>
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgba(0, 51, 255, 0.5)";
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.transform(1, 0, 0, 1, -16776544, -16776916);
        ctx.ellipse(16776994, 16777316, 400, 400, 0, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fill();
    </script>
</body>

Chrome Results

Firefox Results

有没有办法修复失真，或者在某个地方记录了画布转换存在限制？

【问题讨论】：

标签： javascript html canvas ellipse

【解决方案1】：

这是由于浮点数的精度有限。除了避免非常大和非常小的数字之外，您无能为力。

像素大小为 0.1 毫米，您正在处理距原点近一英里的像素（这是一个非常大的屏幕）。

我不确定画布渲染是否使用 32 位浮点数（从您的示例中考虑，我知道 webGL 肯定使用浮点数）您需要在 javascript 中进行转换，因为它使用双精度 64 位，这将为您提供屏幕 9订单（大约）更大（屏幕现在的太阳大小）

例如

var x = 16776544;
var y = 16776916;
var x1 = 16776234;
var y1 = 16776446;
ctx.setTransform(1,0,0,1,0,0);
x -= x1; // apply transform using doubles
y -= y1;
ctx.ellipse(x,y,100,100,0,0,Math.PI*2);

【讨论】：