HTML 캔버스의 수가 많아 이상한 동작이 일어납니다.

HTML 캔버스에서 translate() 호출의 x 구성 요소에 큰 숫자를 크게 할당하면 직사각형이 더 이상 그려지지 않습니다. 적절한 좌표에서.HTML 캔버스의 수가 많아 이상한 동작이 일어납니다.

아래 예제에서 그려지는 두 개의 사각형은 x 구성 요소에서 1만큼 다릅니다. 따라서 왼쪽 가장자리가 한 픽셀 씩 떨어져있을 것으로 예상됩니다. Firefox와 Chrome에서 볼 수 있듯이 그런 일은 발생하지 않습니다. http://jsfiddle.net/pQst6/

가 나는 또한 애니메이션 버전을 만든 :

<html> 
<head> 
    <script type="text/javascript"> 
     function go() { 
      var canvas = document.getElementById("canvas"); 
      if(canvas.getContext) { 
       var ctx = canvas.getContext("2d"); 
       ctx.translate(-1000000000, -500); 
       ctx.fillStyle = '#F00' 
       ctx.fillRect(1000000033, 520, 100, 200); 
       ctx.fillStyle = '#00F'; 
       ctx.fillRect(1000000032, 720, 100, 200); 
      } 
     } 
    </script> 
</head> 
<body onload="go();"> 
<canvas id="canvas" width="800" height="600"> 
</canvas> 
</body> 
</html>

는 여기에서 볼 준비가 같은 예입니다. http://jsfiddle.net/ry35e/ 그림에서 알 수 있듯이 드로잉은 정상적으로 시작되지만 translate 메서드의 x 매개 변수가 높아지면 더 이상하고 더 이상한 동작이 진행됩니다.

Firefox와 Chrome이 모두 동일하게 동작하므로 브라우저 버그가 아닌 예상되는 동작처럼 보입니다. 나는 그것이 일종의 정밀 문제라고 생각하고있다. 동의 하시겠습니까/동의하지 않습니까?

캔버스의 정밀도에 문제가있는 경우 내 자신의 변형 행렬을 찾아서 구현하고 캔버스 컨텍스트로 둘러 쌀 필요가 있습니다. 나는 그것을 만드는 것이 매우 어렵지 않을 것이라고 확신하지만, 누군가는 팝, 푸시 등으로 그러한 변환을 수행하는 자바 스크립트 라이브러리를 알고 있는가?

감사합니다.

출처

2012-01-09 Shannon

정수 2^24 (16777216) 이상으로 fillRect을 호출하면 편차가 발생합니다. 이것은 또한 최대 정수 일 수 있습니다. 단 정밀도로 표현할 수 있습니다. 작업 초안은 배정도 (2^53)에 대한 지원을 언급하고 있지만 분명히 그렇습니다 (아직). CanvasRenderingContext2D 상태의 Mozilla Developer Network (MDN) 문서는 단 정밀도 (float) 만 지원합니다.

단일 정밀도 : http://en.wikipedia.org/wiki/Single-precision
배 정밀도 (double precision) : http://en.wikipedia.org/wiki/Double-precision
작업 초안 : http://www.w3.org/TR/2dcontext/
MDN 문서 : https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#fillRect()

출처

2012-01-16 01:02:15 bennedich

이는 상황이 완전히해야하는 불행한 결과를 갖고있는 것 같아요 보이는 캔버스에서 잘린 경우가 있습니다. 예를 들어, (10, bigNumber)에서 (11, biggerNumber)까지의 행. – jwelsh

HTML 캔버스의 수가 많아 이상한 동작이 일어납니다.

답변

관련 문제