CANVAS 3.2 사각형 그리기
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>p151_3.2사각형그리기</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<canvas id="myCanvas" width="1140" height="1140">canvas</canvas>
<script>
var canvas = $("#myCanvas").get(0);
var ctx = canvas.getContext("2d");
// 내부가 채워진 사각형 그리기
ctx.fillStyle = "magenta"; // 내부 채울 색상
ctx.fillRect(20,20,100,100); // x:20, y:20 위치에서 폭과 높이가 100인 "내부가 색으로 채워진" 사각형 그리기.
ctx.strokeRect(20,20,150,150); // x:20, y:20 위치에서 폭과 높이가 150인 "선만 있는" 사각형 그리기.
ctx.fillStyle = "green"; // color / hex / rgba() / gradient / pattern - 채우기 가능
ctx.fillRect(150,150,50,50);
ctx.strokeRect(150,150,50,50);
// 내부를 사각형으로 지우기
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.fillStyle = "blue";
ctx.fillRect(250,250,200,200);
ctx.strokeRect(250,250,200,200);
ctx.clearRect(270,270,100,50); // 지울 사각형 위치와 크기
</script>
</body>
</html>
결과화면 )
'CODING TIP > CANVAS' 카테고리의 다른 글
| CANVAS 3.3 원그리기 (0) | 2018.02.23 |
|---|---|
| CANVAS 3.1 선그리기, 사각형 그리기 (0) | 2018.02.09 |