7. 픽셀 아트

2017. 8. 22. 00:04ㆍHTML/예제

1. html5에서는 자바스크립트롤 그림을 그릴 수 있는 기능을 지원합니다. 간단한 갠버스를 만들고 사각형(픽셀)을 이용한 재미있는 그림을 그려 보도록 하세요.

2. 캔버스를 만들고 사각형을 출력하는 프로그램을 만들어 봅니다.
   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>픽셀 아트</title>
</head>
<body>
 <canvas id="canvas" width="200px"; height="200px"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var pxDraw = canvas.getContext("2d");
  pxDraw.fillRect(0,0,10,10);
 </script>
</body>
</html>
 


   -2) 실행결과

 

 

 

3. 빨간 사각형 두 개를 만들어 봅니다.
   -1) 소스코드


<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>픽셀 아트</title>
</head>
<body>
 <canvas id="canvas" width="200px"; height="200px"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var pxDraw = canvas.getContext("2d");
  pxDraw.fillStyle = "red";
  pxDraw.fillRect(0,0,10,10);
  pxDraw.fillRect(20,0,10,10);
 </script>
</body>
</html>
 


   -2) 실행결과

 

4. 자바스크립트에서 사용할 수 있는 색상은 100여 가지 정도입니다. https://css-tricks.com/asnippets/css/named-colors-and-hex-equivalents/에서 원하는 색상의 이름을 찾아서 활용하세요. 스티브 얼굴을 그리려면 어떻게 해야 할까요 전체가 7줄로 이루어져 있고, 각 줄을 순서대로 그린다고 생각해 보셍. 어느 부분에서 반복문을 사용할 수 있을까요?

5. 스티브의 얼굴을 그려 봅니다.
   -1) 소스코드


<!--<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>픽셀 아트</title>
</head>
<body>
 <canvas id="canvas" width="200px"; height="200px"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var pxDraw = canvas.getContext("2d");
  pxDraw.fillRect(0,0,10,10);
 </script>
</body>
</html>-->
<!--<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>픽셀 아트</title>
</head>
<body>
 <canvas id="canvas" width="200px"; height="200px"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var pxDraw = canvas.getContext("2d");
  pxDraw.fillStyle = "red";
  pxDraw.fillRect(0,0,10,10);
  pxDraw.fillRect(20,0,10,10);
 </script>
</body>
</html>-->
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <title>픽셀 아트</title>
</head>
<body>
 <canvas id="canvas" width="200px"; height="200px"></canvas>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var pxDraw = canvas.getContext("2d");
  // 첫 번째 줄
  pxDraw.fillStyle = "black";
  for(var i=0; i<8; i++) {
   pxDraw.fillRect(i*10, 0, 10, 10);
   pxDraw.fillRect(i*10, 10, 10, 10);
  }
  // 두 번째 줄
  pxDraw.fillRect(0, 20, 10, 10);
  pxDraw.fillRect(70, 20, 10, 10);
  for(var i=1; i<7; i++) {
   pxDraw.fillRect(i*10, 20, 10, 10);
   pxDraw.fillRect(i*10, 30, 10, 10);
  }
  // 세 번째 줄
  for(var i=0; i<8; i++) {
   pxDraw.fillRect(i*10, 30, 10, 10);
  }
  // 네 번째 줄
  pxDraw.fillRect(0, 40, 10, 10);
  pxDraw.fillStyle = "blue";
  pxDraw.fillRect(20, 40, 10, 10);
  pxDraw.fillRect(50, 40, 10, 10);
  pxDraw.fillStyle = "bisque";
  pxDraw.fillRect(30, 40, 10, 10);
  pxDraw.fillRect(40, 40, 10, 10);
  pxDraw.fillStyle = "black";
  pxDraw.fillRect(70, 40, 10, 10);
  pxDraw.fillStyle = "bisque";
  // 다섯 번째 줄
  for(var i=0; i<3; i++) {
   pxDraw.fillRect(i*10, 50, 10, 10);
  }
  pxDraw.fillStyle = "sienna";
  pxDraw.fillRect(30, 50, 10, 10);
  pxDraw.fillRect(40, 50, 10, 10);
  pxDraw.fillStyle = "bisque";
  for(var i=5; i<8; i++) {
   pxDraw.fillRect(i*10, 50, 10, 10);
  }
  // 여섯 번째 줄
  pxDraw.fillRect(0, 60, 10, 10);
  pxDraw.fillRect(10, 60, 10, 10);
  pxDraw.fillRect(60, 60, 10, 10);
  pxDraw.fillRect(70, 60, 10, 10);
  pxDraw.fillStyle = "black";
  for(var i=2; i<6; i++) {
   pxDraw.fillRect(i*10, 60, 10, 10);
  }
  // 일곱 번째 줄
  pxDraw.fillStyle = "bisque";
  for(var i=0; i<8; i++) {
   pxDraw.fillRect(i*10, 70, 10, 10);
  }
 </script>
</body>
</html>
 


   -2) 실행결과

저작자표시 비영리 동일조건

'HTML > 예제' 카테고리의 다른 글

<button>태그 링크  (0) 2017.03.22
03. Table  (0) 2017.02.20
02. Hyper Link  (0) 2017.02.20
01. Hello, World!  (0) 2017.02.20

관련글

댓글 0

티스토리툴바