canvas의 scale에 원리!

*광고 클릭은 제게 큰 힘이됩니다!

업무를 함에 있어 canvas를 많이 이용하는데 resize를 위해 scale조정을 많이 하는것을보고

 

정리를 해야할거같아 글을쓴다.

 

 

1.CanvasRenderingContext2D.scale 

 

 

기본적으로 캔버스의 한 단위는 1픽셀이다. scale은 배율을 조정하는것으로써 0.5 배율이며 단위크기는 0.5픽셀이되면 

 

스케일링이 2배이면 한 다위가 2픽셀이되도록 단위크기가 증가한다.

.scale(x,y)

x :수평 방향의 배율입니다. 음수 값은 수직 축에서 픽셀을 뒤집습니다. 값은 1수평 확장이되지 않습니다.

 

y :수직 방향의 배율입니다. 음수 값은 가로 축에서 픽셀을 뒤집습니다. 값은 1수직 확장이되지 않습니다.

 

 

예를들어보자 

 

class App{
    constructor(){
        this.canvas = document.createElement('canvas');
        this.ctx = this.canvas.getContext("2d");
        document.body.appendChild(this.canvas);

        window.addEventListener('resize',this.resize.bind(this),false);
        this.resize();
        this.image = new Image();
        this.image.onload =this.draw.bind(this);
        this.image.src = "./assets/1.jpg"

        //requestAnimationFrame(this.animate.bind(this));
    }

    resize(){
        this.stateWidth = document.body.clientWidth;
        this.stateHeight = document.body.clientHeight;

        this.canvas.width = this.stateWidth *2 ;
        this.canvas.height = this.stateHeight* 2;
        this.ctx.scale(1,1);
     }

     animate(t){
         requestAnimationFrame(this.animate.bind(this))
     }

     draw(){
         
        this.ctx.drawImage(this.image,10,10,300,300);
     }
}


window.onload = () =>{
    new App();
}

canvas를 사용할수있는 환경을 생성한후

 

this.ctx.scale을 이용하여 (1,1)배로 만들어보자

이제 this.ctx.sclae을 (2,2) 로 변경한후 화면을 보자

 

 

scale을 통해 픽셀이 2배이상 증가했다는것을 볼수있다. 사진에 화질이 좋지않으면 깨질수있다는것을 잘생각해야된다.