이미지 객체를 Canvas 에 그리기

 

티스토리 상에 이미지를 첨부하고 테스트를 해보겠다.
상기 이미지는 아래의 경로를 갖는다.

https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg

 

IMG Tag로 이미지 출력

<img id="scream" width="220" height = "277" src= "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg" alt="The Scream">

IMG Tag 로 아래와 같이 티스토리에 업로드된 이미지 주소를 출력하였다.

Canvas 객체를 생성하여 이미지를 그리는 코드

<!-- myCanvas 아이디로 canvas 객체 선언 -->
<canvas id="myCanvas" width="240" height="297"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<!-- 웹페이지가 로드되고나서 myCanvas 라고 id 를 부여받은 canvas 의 element 를 가져온다 -->
<!-- 이후 canvas 의 context 정보를 얻고 image 를 canvas 에 드로잉 한다 -->
<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
};
</script>

상기 코드는 canvas를 생성하고 이전의 생성한 img 객체를 canvas 에 드로잉 하는 코드이다.
canvas 를 생성할 때 style 속성에 border를 1px로 설정하였기 때문에 주위에 테두리가 생기는 것을 확인할 수 있다.

Your browser does not support the HTML5 canvas tag.