Song Min Cheol

:)

1 분 소요

canvas에 그림그리기, 색상선택 기능, css background 속성

1. canvas에 그림그리기

html css 기본 구조

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      canvas {
        background: #eee;
      }
      .color-btn{
        width: 30px;
        height: 30px;
        border: none;
      }
      .color-btn[data-color="black"]{
        background-color: black;
      }
      .color-btn[data-color="red"]{
        background-color: red;
      }
      .color-btn[data-color="green"]{
        background-color: green;
      }
      .color-btn[data-color="blue"]{
        background-color: blue;
      }
    </style>
  </head>

  <body>

    <h1>Image</h1>
    <canvas class="canvas" width="600" height="400">Image</canvas>
    <div class="con">
      <button class="color-btn"  data-color="black"></button>
      <button class="color-btn"  data-color="red"></button>
      <button class="color-btn"  data-color="green"></button>
      <button class="color-btn"  data-color="blue"></button>
    </div>
  
    <script>
     ...
    </script>
  </body>
</html>

실행화면 Alt text

js

변수

<script>
      const canvas = document.querySelector('.canvas');
      const ctx = canvas.getContext('2d');
      const control = document.querySelector('.con');


      let drawingMode=false;
      let colorVal='black';
</script>

마우스를 클릭하고 드래그 하는동안만 그림을 그리기 위해 drawingMode변수를 정의, 색을 저장하기위한 colorVal 을 정의하였다.

이벤트함수

      function upHandler(){
        drawingMode=false;
      }
      function downHandler(){
        drawingMode = true;
      }
      function moveHandler(e){
        if(!drawingMode)
          return;
        
          ctx.beginPath();
          ctx.arc(e.offsetX,e.offsetY,10,0,Math.PI*2);
          ctx.fill();
      }

      canvas.addEventListener('mousedown',downHandler);
      canvas.addEventListener('mousemove',moveHandler);
      canvas.addEventListener('mouseup',upHandler);

캔버스에서 마우스를 클릭하고 드래그 하는 동안만 그림을 그리기 위해서 마우스를 눌렀을때 drawingMode를 true로 설정하고, 마우스를 땠을때 drawingMode를 false로 설정한다. moveHandler()에선 drawingMode가 false이면 returna문으로 빠져나와 그림을 그리지 않고, true라면 원을 반복적으로 그려주어 그림을 그리게 된다.

2. 색상선택 기능

 function setColor(e){
        colorVal = e.target.getAttribute('data-color');
        ctx.fillStyle = colorVal;
 }
 control.addEventListener('click',setColor);

e.target.getAttribute('data-color')을 사용해서 색상 값을 추출한다.

<div class="con">
      <button class="color-btn"  data-color="black"></button>
      <button class="color-btn"  data-color="red"></button>
      <button class="color-btn"  data-color="green"></button>
      <button class="color-btn"  data-color="blue"></button>
</div>

html코드를 보면 <button>에 data-color속성값이 정의되어 있다. 태그안에 클래스와 id를 제외하고 따로 속성값을 정의해 줄 수 있다는 사실을 처음 알았다..!

3. css background 속성

.image-btn{
        width : 40px;
        height : 40px;

        background : url(./images/ilbuni1.png) no-repeat 50% 50% / cover;
  }

background : url(./images/ilbuni1.png) no-repeat 50% 50% / cover;

  • no-repeat은 백그라운드 이미지가 반복되지 않고 오직 한번만 보여지는 것
  • 50% 50% / cover은 가로 50% 세로 50% 에 위치시키고, 이미지가 백그라운드 사이즈를 완전히 다 덮게 설정하는 것이다.

Alt text 이미지가 잘 들어간 것을 볼 수 있다.

js 뿐만아니라 css도 더 공부 해야겠다고 느꼈다!

카테고리:

업데이트:

댓글남기기

참고