JavaScript에서 Canvas API 사용

4101 단어 webdevjavascriptprogrammingdesign

캔버스 API란?



MDN에서

The Canvas API provides a means for drawing graphics via JavaScript and the HTML element. Among other things, it can be used for animation, game graphics, data visualization, photo manipulation, and real-time video processing.

The Canvas API largely focuses on 2D graphics. The WebGL API, which also uses the element, draws hardware-accelerated 2D and 3D graphics.



Canvas API 사용을 시작하는 방법


  • Canvas 사용을 시작하려면 HTML<body> 태그 사이에 스크립트 태그를 배치하십시오.

    • <canvas id="canvas" width="600" height="600"></canvas>


    관례적으로 id의 이름은 일반적으로 'canvas'로 표시됩니다. 물론 이 이름은 원하는 대로 지정할 수 있습니다. 코드 흐름을 최적화하고 이해하기 쉬운 이름을 선택하기만 하면 됩니다.

    초기 스켈레톤 설정이 완료되면 캔버스 공간을 설정할 때 두 가지 속성이 필요합니다. 캔버스의 원하는 '너비'와 '높이'를 설정해야 합니다. 또한 이러한 속성은 필요한 경우 설계 프로세스에서 잘 변경할 수 있습니다.

    let canvas = document.querySelector("#canvas");
const width = canvas.width;
const height = canvas.height;

canvas.width = 400;
canvas.height = 400;


    창의력을 발휘하다



    이러한 예를 생각하면서 스크립트 태그 사이에 중첩된 HTML의 본문 태그에 코딩할 것입니다. 동일한 환경에서 저와 함께 자유롭게 코딩하거나 별도의 JavaScript 파일로 코드를 이동할 수 있습니다.

    기본 설정



    HTML 코드의 스켈레톤 프레임을 배치했으면 이제 창의적인 욕구를 실현하는 코드를 구현할 차례입니다!

     let canvas = document.querySelector("#canvas");
 let context = canvas.getContext('2d');


  • 코드의 스크립트 부분에 'Document' 메소드를 배치하고 앞에서 만든 캔버스 공간의 ID를 전달하여 그래픽 사용자 정의를 시작합니다. 먼저 해당 속성의 기호를 입력하여 ID를 대상으로 합니다.

    • 빠른 재충전# = id
    . = class.
  • 아래 코드는 우리가 만들고 있는 드로잉 표면의 컨텍스트가 3D가 아니라 2D임을 JavaScript에 알려줍니다. 그리고 이것은 모양, 텍스트 및 이미지를 만드는 데 사용할 수 있습니다.
    • let context = canvas.getContext('2d');

    첫 번째 모양



    먼저 'strokeRect()' 메서드를 사용하여 4픽셀 스트로크로 윤곽선이 표시된 사각형을 만듭니다. 색상 속성은 'strokeStyle()'에 연결된 변수를 호출한 다음 16진수 색상 코드를 입력하거나 JavaScript에서 식별하는 색상 이름으로 변경할 수 있습니다. 오늘의 예에서는 '녹색'을 사용하겠습니다. 'strokeRect()'에 전달된 매개변수는 단순히 (100, 100)의 왼쪽 상단 모서리를 참조하고 폭 400 단위(첫 번째 400) x 높이 400 단위(두 번째 400)의 크기를 제공합니다.

     context.lineWidth = 4;
 context.strokeStyle = 'green';
 context.beginPath();
 context.strokeRect(100, 100, 400, 400); 
 context.stroke();


    결과





    중첩된 모양




    context.beginPath();
        context.arc(300, 300, 100, 0, Math.PI*2);
        context.lineWidth = 3;
        context.stroke();


    결과





    코드를 가지고 놀아보세요



    새로운 도형을 추가하고, 도형의 크기를 재정렬하는 등의 작업을 해보세요. 창의력을 발휘하고 약간의 조정 또는 주요 조정으로 할 수 있는 모든 작업을 탐색하세요! 이 예에서는 벤 다이어그램이 서로 포지셔닝되는 더 큰 주 원을 위해 두 개의 측면 원을 만들었습니다.

    context.beginPath();
        context.arc(400, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();

        context.beginPath();
        context.arc(200, 300, 50, 0, Math.PI*2);
        context.lineWidth = 2.5;
        context.stroke();


    결과





    자원


  • MDN Official Canvas API Documentation
    • 화상 처리 100개 노크 C언어로 도전해 보자 #3
    Jest로 React 컴포넌트가 존재하지 않는지 테스트하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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