scale() 함수를 최우선 순위로 만드는 방법은 무엇입니까?

Question

일부 계산에서 수집 된 정보를 캔버스 그래프에 그려주는 프로그램을 만들려고합니다. 그러나 큰 숫자를 수용 할 수 있도록 그래프의 크기를 조정해야합니다. 그러나 매번 나는 ctx.scale(); 전체 캔버스 공백을 넣습니다! 캔버스를 먼저 크기 조정하여이 작업을 중단 할 수 있다고 생각했지만 크기를 조정 한 후에 캔바스에 그려지는 것은 없습니다.

var c=document.getElementById("graph_"); 
     var ctx=c.getContext("2d"); 
     graph_.style.backgroundColor="white"; 
     var z0=Math.max(Math.abs(a),Math.abs(b)); 
     var z=Math.round(z0);   
     var z1=Math.round(z); 
     var z2=z*2 
     // alert(z1); 
     // alert(z2); 

     ctx.scale(3200/z,3200/z)  

     var xnew=360/2+360/2*a 
     var ynew=360/2-360/2*b 
     alert(xnew);  
     alert(ynew); 

     ctx.font = '10px Calibri'; 
     ctx.fillText("(0 , 0)", 125, 85); 
     ctx.fillText(z1, 210, 87); 
     ctx.fillText(z2, 270, 87); 

     ctx.fillText(z1*-1, 75, 87); 
     ctx.fillText(z2*-1, 0, 87); 

     ctx.fillText(z1, 120, 43.5); 
     ctx.fillText(z2, 120, 10); 

     ctx.fillText(z1*-1, 120, 120); 
     ctx.fillText(z2*-1, 120, 145); 

     ctx.lineWidth = 1; 
     ctx.beginPath() 
     ctx.moveTo(150, 0); 
     ctx.lineTo(150, 400); 
     ctx.closePath(); 

     ctx.lineWidth = .2; 
     ctx.moveTo(0, 75); 
     ctx.lineTo(400, 75); 
     ctx.strokeStyle = "#8B8682"; 
     ctx.stroke(); 
     ctx.closePath(); 

      ctx.beginPath(); 
      ctx.lineWidth = 2; 
      ctx.moveTo(xnew, 180); 
      ctx.lineTo(180, ynew); 
      ctx.strokeStyle = "red"; 
      ctx.stroke();       

Answer 1

실제로 캔버스에 그려지는 것들이 있습니다. 드로잉의 기본 원점이 너무 커서 그래프의 왼쪽 위 모서리에 너무 크게 확대되어 있기 때문에 볼 수 없습니다. 왼쪽 상단은 0,0으로 남았습니다.

큰 그림을 그리기 위해 확대 축소하려는 경우에도 캔버스 원점을 새 원점 (상단)으로 변환해야합니다. 컨텍스트의 크기를 조정하기 전에 보려는 대상의 왼쪽).

당신은

ctx.translate(newX,newY); 

처럼 번역하는 방법을 사용할 수 있습니다하지만 당신이 전에 당신은 다시 되돌릴 수 있도록 문맥의 상태를 저장하는 것과 것입니다. offsetX 캔버스 폭/2 및 offsetY는 캔버스 높이/2이고

ctx.translate((-c.width /2 * scale) + offsetX,(-c.height/2 * scale) + offsetY); 

:

당신이 지점으로 변환 할 그래프의 중심을 확대하고 싶어 말 스케일은 ctx.scale 호출에서 스케일링하는 양만큼입니다.

Answer 2

3200/z의 값이 정확히 무엇입니까 :

여기 내 캔버스에 대한 코딩입니까?

엄청난 양의 캔버스를 스케일링하여 화면에 보이는 유일한 것이 캔버스의 처음 몇 픽셀이 될 것이라고 생각합니다. 화면의 왼쪽 상단 5 픽셀에는 아무 것도 그리지 않으므로 아무 것도 볼 수 없습니다.