게임/HTML 연습
CANVAS 연습5(이미지 그리기)
런던전통손만두
2018. 6. 25. 00:36
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습5</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas>
<script>
//이미지 그리기(원래 크기대로)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var myPic = new Image(); //이미지 변수 선언
myPic.src = "images/flower_s.jpg"; //이미지 경로 설정
myPic.onload = function () { //이미지 로드
ctx.drawImage(myPic, 10, 10); //이미지 그리기
//context.drawImage(img(이미지 소스 넘기기), x(x좌표), y(y좌표));
}
</script>
</body>
</html>
결과:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습5_1</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas>
<script>
//이미지 그리기(크기 변형)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var myPic = new Image();
myPic.src = "images/flower_s.jpg";
myPic.onload = function () {
ctx.drawImage(myPic, 10, 10, 200, 300); //이미지를 높이와 폭을 변형하여 그린다.
//context.drawImage(img, x, y, width, height);
//img:이미지 소스, x: x좌표, y: y좌표, width: 이미지 폭, height: 이미지 높이
}
</script>
</body>
</html>
결과:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습5_2</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style="border: 1px dotted blue"></canvas>
<script>
//이미지 그리기(일부만)
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var myPic = new Image();
myPic.src = "images/flower.jpg";
myPic.onload = function() {
ctx.drawImage(myPic, 300, 300, 200, 200, 10, 10, 300, 200); //소스 이미지에서 일부를 잘라 그린다.
//context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);
//img: 이미지 소스, sx: 이미지에서 잘라 가져올 시작점의 x좌표, sy: 이미지에서 잘라 가져올 시작점의 y좌표
//swidth: 잘라 가져올 이미지의 폭 sheight: 잘라 가져올 이미지의 높이
//x: 이미지가 그려지는 x좌표, y: 이미지가 그려지는 y좌표, width: 이미지 폭, height: 이미지 높이
}
</script>
</body>
</html>
결과:
flower_s.jpg :
크기: 100px * 100px
flower.jpg :
크기: 1000px * 1000px
반응형