HTML의 canvas와 JavaScript로 그림 그리기 앱 만드는 【컬러 팔레트·지우개 기능 추가편】

17209 단어 HTML5자바스크립트캔버스그림

소개



전회 기사 「 【초보자용】 HTML의 canvas와 JavaScript로 그림 그리기 앱 만들기 【최소한의 기능 실장편】 」의 계속의 내용이 됩니다.

또, 이번 이야기하는 내용은 「 HTML의 canvas와 JavaScript로 그림 그리기 앱 【색·지우개 추가편】 」중, 주로 기능 실장의 개요를 정리한 것이 됩니다.

완성 이미지





이번에 작성한 코드의 리포지토리를 공개하는 애플리케이션


  • GitHub 리포지토리
  • 게시된 앱

    • 이번에 추가한 기능


  • 컬러 팔레트를 사용한 색상 변경 기능
  • 지우개 모드에 의한 부분 지우기 기능

    • 컬러 팔레트를 사용한 색상 변경 기능



    컬러 팔레트를 구현하기 위해 이번에는 "colorjoe"이라는 라이브러리를 이용했습니다.

    "colorjoe"를 사용하여 다음 기능을 실현할 수 있습니다.
  • 컬러 팔레트 사용자 정의
  • RGB 또는 HSL로 색상 정보를 얻을 수 있습니다
  • colorjoe의 독자적인 이벤트로 선택중·선택 후의 색을 취득할 수 있다

    • 컬러 팔레트의 커스터마이즈는 몇 가지 종류가 있으므로, 흥미가 있는 분은 「 colorjoe 본 사이트 」의 데모를 보면 좋을까 생각합니다.

    지우개 모드에 의한 부분 지우기 기능



    지우개 모드는 매우 간단하고, 선택하는 색을 canvas와 같은 배경색(이번 경우는 흰색)을 선택하면 좋을 뿐입니다.

    상기의 「완성 이미지」의 애니메이션 화상에서는, 「지우개 모드」버튼을 클릭했을 때에, 색의 지정으로 「#FFFFFF」와 흰색을 세트 하도록 하고 있습니다.

    이번에 만든 코드



    index.html
    <!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 色変更に使うライブラリで用意されているCSSを導入 https://github.com/bebraw/colorjoe -->
  <link rel="stylesheet" href="css/colorjoe.css">
  <title>お絵かきアプリ</title>
</head>
<body>
  <h1>お絵かきアプリ</h1>
  <div>
    <canvas
      id="draw-area"
      width="400px"
      height="400px"
      style="border: 1px solid #000000;"></canvas>
    <!-- 色を選択できるカラーパレットを用意する。 -->
    <span id="color-palette"></span>
  </div>
  <div>
    <button id="clear-button">全消し</button>
  </div>
  <div>
    <button id="eraser-button">消しゴムモード</button>
  </div>
  <!-- 色変更に使うライブラリを導入 https://github.com/bebraw/colorjoe -->
  <script src="./js/colorjoe.min.js"></script>
  <script src="./js/main.js"></script>
</body>
</html>

    main.js
    // https://github.com/tsuyopon-xyz/drawing_app_part1/blob/master/main.js
// 上記のコードを元に以下の追加機能を追加します。
// - 線の色を変更する機能
// - 消しゴム機能
//
// 元々書かれてた説明のコメントは削除しました。理由は次のとおりです。
// - 今回の変更差分の説明コメントのみにすることで、どの部分で変更があったかわかりやすくするため
window.addEventListener('load', () => {
  const canvas = document.querySelector('#draw-area');
  const context = canvas.getContext('2d');
  const lastPosition = { x: null, y: null };
  let isDrag = false;

  // 現在の線の色を保持する変数(デフォルトは黒(#000000)とする)
  let currentColor = '#000000';

  function draw(x, y) {
    if(!isDrag) {
      return;
    }
    context.lineCap = 'round';
    context.lineJoin = 'round';
    context.lineWidth = 5;
    context.strokeStyle = currentColor;
    if (lastPosition.x === null || lastPosition.y === null) {
      context.moveTo(x, y);
    } else {
      context.moveTo(lastPosition.x, lastPosition.y);
    }
    context.lineTo(x, y);
    context.stroke();

    lastPosition.x = x;
    lastPosition.y = y;
  }

  function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

  function dragStart(event) {
    context.beginPath();

    isDrag = true;
  }

  function dragEnd(event) {
    context.closePath();
    isDrag = false;
    lastPosition.x = null;
    lastPosition.y = null;
  }

  function initEventHandler() {
    const clearButton = document.querySelector('#clear-button');
    clearButton.addEventListener('click', clear);

    // 消しゴムモードを選択したときの挙動
    const eraserButton = document.querySelector('#eraser-button');
    eraserButton.addEventListener('click', () => {
      // 消しゴムと同等の機能を実装したい場合は現在選択している線の色を
      // 白(#FFFFFF)に変更するだけでよい
      currentColor = '#FFFFFF';
    });

    canvas.addEventListener('mousedown', dragStart);
    canvas.addEventListener('mouseup', dragEnd);
    canvas.addEventListener('mouseout', dragEnd);
    canvas.addEventListener('mousemove', (event) => {
      draw(event.layerX, event.layerY);
    });
  }

  // カラーパレットの設置を行う
  function initColorPalette() {
    const joe = colorjoe.rgb('color-palette', currentColor);

    // 'done'イベントは、カラーパレットから色を選択した時に呼ばれるイベント
    // ドキュメント: https://github.com/bebraw/colorjoe#event-handling
    joe.on('done', color => {
      // コールバック関数の引数からcolorオブジェクトを受け取り、
      // このcolorオブジェクト経由で選択した色情報を取得する

      // color.hex()を実行すると '#FF0000' のような形式で色情報を16進数の形式で受け取れる
      // draw関数の手前で定義されている、線の色を保持する変数に代入して色情報を変更する
      currentColor = color.hex();
    });
  }

  initEventHandler();

  // カラーパレット情報を初期化する
  initColorPalette();
});

    위의 코드에 대한 자세한 설명은 코드에 포함된 코멘트를 읽을 수 있다고 생각합니다.

    코멘트 이외에서도 자세한 해설을 갖고 싶은 분은 「 HTML의 canvas와 JavaScript로 그림 그리기 앱 【색·지우개 추가편】
    leaflet를 단련한다. 그 3
    Chart.js를 서버 측에서 사용하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage