HTML5 캔버스를 마우스 커서로 확대/축소

캔버스는 항상 현재 원점을 기준으로 크기가 조정됩니다. 기본 원점은 [0,0]입니다. 다른 지점에서 확대/축소하려면 먼저 ctx.translate(desiredX,desiredY); 를 수행하면 됩니다. 이렇게 하면 캔버스의 원점이 [desiredX,desiredY]로 재설정됩니다.

translate() 메서드는 캔버스의 (0,0) 위치를 다시 매핑합니다. scale() 메서드는 현재 그래픽을 확대하거나 축소합니다. 캔버스 컨텍스트를 오프셋으로 이동()하려면 먼저 확대하거나 축소하기 위해 scale()을 수행한 다음 마우스 오프셋의 반대 위치로 이동()해야 합니다.

다음 예는 단계를 제공합니다

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

위 내용은 HTML5 캔버스를 마우스 커서로 확대/축소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!