Question

当我转换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

有没有办法解决失真问题，还是在某处记录了画布转换的限制？

Answer 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);

HTML5 Canvas Ellipse Outline变形扭曲

1 个答案: