HTML5 Canvas 椭圆轮廓变形后变形

Question

当我转换 HTML5 canvas 上下文并绘制椭圆时，随着转换变大，椭圆轮廓变得完全扭曲。下面是一些示例代码和我在 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

是否有修复失真的方法，或者是否在某处记录了 canvas 转换的限制？

Answer 1

这是由于浮点数的精度有限。您对此无能为力，只能避免非常大和非常小的数字。

对于 0.1mm 的像素大小，您正在处理距离原点（这是一个非常大的屏幕）一英里附近的像素。

我不确定 canvas 渲染是否使用 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);

HTML5 Canvas 椭圆轮廓变形后变形

HTML5 Canvas Ellipse Outline Becomes Distorted As Transformed

html

javascript

canvas

ellipse