javascript이미지그리기

캔버스에 이미지를 그릴 때 확대나 축소해야 하는 경우가 있죠? Javascript Canvas 이미지 그리기 방법 중 확대, 축소 기능을 살펴보겠습니다. Javascript 이미지 그리기 확대, 축소 방법 이미지 객체를 가져와서 확대, 또는 축소해서 canvas에 그리는 방법을 다음 코드로 살펴보겠습니다. 사용한 방법은 라인 11, 12에 있는 drawImage() 메서드를 이용한 방법입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 왼쪽에는 img … Read more

Javascript Canvas 이미지 그리기 방법 중 원본 이미지를 그대로 캔버스에 그리는 방법을 알아보겠습니다. Javascript Canvas 이미지 그리기(copy) 코드를 통해서 간단히 사용 방법을 알아보도록 하겠습니다. 코드에서 사용한 캔버스의 크기는 200 x 300입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 좌측은 img 태그로 표현된 원본 이미지이며 우측의 빨간 상자로 표시한 것은 캔버스입니다. 캔버스의 (20, 20)부터 원본 이미지가 그려진 … Read more