html5 캔버스의 그래픽 : 기괴하고 바람직하지 않은 광학 효과

Question

이 프로그램이 실행됩니다. 하지만, 가능한 한 사각형이 바뀌면 아티팩트가 있음을 알 수 있습니다. 행렬 값이 표현되어야하며이 표현은 각도에 따라 표시되어야합니다. 좋은 시각화를 달성 할 수있는 방법이 있습니까? 왜 내 코드가 이렇게됩니까?

var canvas=document.getElementById('canvas'); 
    var ctx=canvas.getContext('2d'); 

    var x=100; 
    var y=100; 
    var width=200; 
    var height=200; 
    var radianAngle=0; 


    Rotar(); 


    var array = new Array2D(200,200); 


    function Array2D(NumOfRows,NumOfCols) 
    { 
    var k=new Array(NumOfRows); 
    for (i = 0; i < k.length; ++i) 
    k[i] = new Array(NumOfCols); 
    return k; 
    } 

    function Rotar(){ 
    //Borramos 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    //Salvamos el estado 
    ctx.save(); 
    // Transladamos su centro de gravedad 
    ctx.translate(x+width/2,y+height/2); 
    //Otra mⳍ 
    ctx.rotate(radianAngle);  



    var array = new Array2D(200,200); 
    for(i=0; i<200; i++) 
    { 
     for(j=0;j<200; j++) 
     { 
     array[i][j]=i+j; 
     var r,g,b; 
     r = array[i][j]; 
     g=50; 
     b=50; 
     //La parte de dibujo 
     ctx.fillStyle = "rgba("+r+","+g+","+b+",100)"; 
     ctx.fillRect(i, j, 1, 1); 



    } 
    } 

    ctx.restore();  
     } 

    $("#test").click(function(){ 

    radianAngle+=Math.PI/60; 


    // call rotateSquare 
    Rotar(); 
}); 

body { 
      background: #dddddd; 
     } 

     #canvas { 
      background: #eeeeee; 
      border: thin solid #aaaaaa; 
     } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<canvas id="canvas" height="500" width="500"></canvas> 
<button id="test">Rotate</button><br> 

ROTAR(); }});

Answer 1

이것은 일반적인 반올림 문제입니다. 컨텍스트를 회전 한 다음 [0,199]에서 (x, y)를 반복합니다. 그러나 작은 1 픽셀 너비의 직사각형을 그리는 동안 완벽하게 1 픽셀에 들어 가지 않으므로 렌더러는 여러 실제 장치 픽셀의 색상을 '확산'해야하며 r, g, b는 단지 반올림 오류가 발생합니다 8 비트에 저장된다. 이 작은 사각형의 좌표에 오류를 추가합니다.이 오류는 최대 4 픽셀로 래스터 화됩니다. 그리고 사용자가 원하는 격자가 있습니다.

이러한 변환을 수행 할 때 규칙은 래스터 화하는 것입니다. 즉, 대상의 픽셀을 반복하고 주위에서 다른 곳이 아닌 소스에서 원래의 위치를 ​​찾습니다.
그래서 간단한 방법 : 회전 된 rect의 경계 상자를 찾고,이 BBox에서 반복하고, 점이 rect에 있으면 색을 계산하십시오. 여기에 가장 간단한 그리는 것에 대해 ...

그러나 :
또는 RECT를 래스터 화 알고리즘을 구축 (http://jsfiddle.net/gamealchemist/5cnkr2s5/ 가장 쉬운 삼각형을 사용하여 내가 연주 삼각형 래스터의 예는 여기를 참조하는 것입니다) 선형 그래디언트를 작성하여 fillStyle로 사용하고 단일 fillRect 호출에서 전체 사각형을 그립니다. 즉, 캔버스 (그리고 장면 뒤의 GPU)가 수학을 수행하도록하십시오. 여기

var grad = ctx.createLinearGradient(0,0,200,200); 
grad.addColorStop(0,'#000'); 
grad.addColorStop(1,'#F00'); 
ctx.fillStyle = grad; 

// 
ctx.save(); 
ctx.clearRect(...); 
ctx.translate (the upper left point) ; 
ctx.rotate (some angle); 
ctx.fillRect(0, 0, 200, 200); 
ctx.restore(); 

가장 간단한 예 ('실행'을 여러 번 클릭 각도는 무작위입니다) :

http://jsfiddle.net/gamealchemist/j57msxr5/11/

(Rq가 : 당신이 context2D에 의해 사용의 최대 속도의 아이디어를 가질 수 있습니다 위에서 언급 한 삼각형 래스터 화를 context2D와 동일한 작업과 비교 : http://jsfiddle.net/gamealchemist/zch3gdrx/)