티스토리 상에 이미지를 첨부하고 테스트를 해보겠다.
상기 이미지는 아래의 경로를 갖는다.
https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fblx41k%2Fbtq31asAHuU%2FnkcKYglcscK8pd60WNysNk%2Fimg.jpg
<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 로 아래와 같이 티스토리에 업로드된 이미지 주소를 출력하였다.
<!-- 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로 설정하였기 때문에 주위에 테두리가 생기는 것을 확인할 수 있다.
PathToHeart 좌표로 하트 그리는 HTML 코드 (0) | 2024.02.21 |
---|---|
Window 크기에 맞게 HTML 5 Canvas 크기 조정하기 (0) | 2021.06.18 |
CORS - DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded. (0) | 2021.05.11 |
Teachable Machine TensorFlow.js 예제 분석 (2) | 2021.05.10 |
Canvas 객체를 이미지로 AWS S3에 업로드 하기 (0) | 2021.05.10 |
댓글 영역