Javascript HTML5画布椭圆轮廓随着变换而扭曲_Javascript_Html_Canvas_Ellipse

Javascript HTML5画布椭圆轮廓随着变换而扭曲

javascript html canvas

Javascript HTML5画布椭圆轮廓随着变换而扭曲,javascript,html,canvas,ellipse,Javascript,Html,Canvas,Ellipse,当我变换HTML5画布上下文并绘制椭圆时，随着变换变大，椭圆轮廓完全扭曲。下面是我在Firefox和Chrome中看到的一些示例代码和结果 <body> <canvas id="myCanvas" width=900 height=900></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = can

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


var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.fillStyle=“rgba（0,51255,0.5）”；
ctx.lineWidth=2；
ctx.beginPath（）；
变换（1,0,0,1，-16776544，-16776916）；
椭圆（16776994，16777316，400，400，0，0，2*数学圆周率）；
ctx.stroke（）；
ctx.fill（）；

是否有办法修复失真，或者是否有文件证明画布转换存在限制？

这是由于浮点数的精度有限。对此你无能为力，但要避免真的大数字和真的小数字

像素大小为0.1mm时，您正在寻址距离原点一英里（这是一个非常大的屏幕）附近的像素

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