게임/HTML 연습
CANVAS 연습8(그림자, 위치 이동, 크기 변형)
런던전통손만두
2018. 6. 25. 22:47
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CANVAS 연습8</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600" style = "border: 1px dotted blue"></canva>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//그림자 그리기
ctx.shadowColor = "rgba(0, 0, 0, 0.4)"; //그림자 색 + 투명도 설정 (투명도는 0.4이다.)
ctx.shadowOffsetX = 5; // 그림자의 간격을 x축 방향으로 5만큼 이동
ctx.shadowOffsetY = 5; // 그림자의 간격을 y축 방향으로 5만큼 이동
ctx.shadowBlur = 3; // 그림자의 흐림을 3만큼 적용 (퍼지는 정도)
ctx.fillStyle = "purple";
ctx.fillRect(50, 50, 100, 100);
//위치 이동
ctx.fillStyle = "green";
ctx.fillRect(50, 200, 100, 100);
ctx.translate(100, 100); //다음에 나오는 객체를 (100,100)만큼 이동
ctx.fillRect(50, 200, 100, 100); //이동하는 사각형
//크기 변형
ctx.fillStyle = "blue";
ctx.fillRect(400, 50, 100, 100);
ctx.scale(0.5, 0.5); //크기를 절반으로 줄인다.
//기준점 (0,0)으로 하여 크기를 줄이기 때문에 제자리에서 크기가 줄지 않고, 위치가 상단으로 이동한다.
ctx.fillStyle = "red";
ctx.fillRect(400, 50, 100, 100);
</script>
</body>
</html>
결과:
'크기 변형'에서 빨간 사각형과 파란 사각형의 거리가 생각보다 많이 떨어져 있다.
위의 '위치 이동'의 'ctx.translate'가 파란 사각형에만 적용된 것 같다.
반응형