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時，您正在尋址距離原點一英里（這是一個非常大的屏幕）的像素。

我不知道如果畫布渲染使用32位浮動（思考它從你的例子中，並且我知道，webGL肯定使用浮動），你需要在JavaScript中做轉換，因爲它使用雙64bit，它會給你一個屏幕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畫布橢圓輪廓在轉換後變爲

回答

相關問題