개발, 심리, 투자 그리고 일상의 생각 나눔
이미지를 읽어와서 캔버스에 그림을 그려야 할 때가 있죠. Javascript Canvas 이미지 그리기 방법을 살펴보겠습니다. Javascript Canvas 이미지 그리기 방법(crop, slicing) canvas에 이미지를 그리는 방법은 canvas의 context를 가져와서 drawImage() 메서드를 이용하면 됩니다. 이미지의 특정 부분만 canvas에 그리는 방법 역시 drawImage() 메서드를 이용하는 방법인데 전달해야 하는 파라미터의 개수에 차이가 있습니다. 우선 코드부터 살펴보시죠. 아래 그림은 위의 코드를 … Read more
캔버스에 이미지를 그릴 때 확대나 축소해야 하는 경우가 있죠? Javascript Canvas 이미지 그리기 방법 중 확대, 축소 기능을 살펴보겠습니다. Javascript 이미지 그리기 확대, 축소 방법 이미지 객체를 가져와서 확대, 또는 축소해서 canvas에 그리는 방법을 다음 코드로 살펴보겠습니다. 사용한 방법은 라인 11, 12에 있는 drawImage() 메서드를 이용한 방법입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 왼쪽에는 img … Read more
Javascript Canvas 이미지 그리기 방법 중 원본 이미지를 그대로 캔버스에 그리는 방법을 알아보겠습니다. Javascript Canvas 이미지 그리기(copy) 코드를 통해서 간단히 사용 방법을 알아보도록 하겠습니다. 코드에서 사용한 캔버스의 크기는 200 x 300입니다. 위의 코드를 실행한 결과는 아래와 같습니다. 좌측은 img 태그로 표현된 원본 이미지이며 우측의 빨간 상자로 표시한 것은 캔버스입니다. 캔버스의 (20, 20)부터 원본 이미지가 그려진 … Read more