HTML5キャンバス楕円のアウトラインが変形して変形する

HTML5キャンバスのコンテキストを変換して楕円を描くと、トランスフォームが大きくなるにつれて楕円の輪郭が完全に歪んでしまいます。以下は、サンプルコードと、FirefoxとChromeの両方で見られる結果です。HTML5キャンバス楕円のアウトラインが変形して変形する

<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

歪みを修正する方法はありますかはそれがどこかにキャンバスの変換には限界があることが実証されていますか？

出典

2017-06-22 user7400966

これは浮動小数点数の精度が限られているためです。本当に大きくて本当に小さい数字を避けるために、あなたはそれについて何もできません。

0.1mmのピクセルサイズでは、原点から約1マイル離れたピクセルに対応しています（これは非常に大きな画面です）。

キャンバスのレンダリングで32ビットの浮動小数点数を使用するかどうかはわかりません（例では、webGLが浮動小数点数を使用していることが分かります）javascriptで変換する必要があります。 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);

出典

2017-06-22 17:39:15 Blindman67

HTML5キャンバス楕円のアウトラインが変形して変形する

答えて

関連する問題