2. JavaScript 캔버스

javascript에서는 <canvas>라는 요소가 존재하는데 스크립트를 사용하여 그림을 그릴 수 있다

1. canvas로 도형 그려보기

html body 상에 canvas 요소를 주고 id를 부여한다.

<canvas id="myCanvas" width="400" height="400" ></canvas>

js 파일에서는 해당 element를 document.getElementById로 찾아서 변수에 저장한다.
javascript의 document란?

const canvas = document.getElementById("myCanvas");

canvas 위에 그림을 그리기 위해선 자바스크립트 context 오브젝트를 사용하면 된다

const context = canvas.getContext("2d"); // 그려주는 것에 대한 제어권을 설정
// CanvasRenderingContext2D (en-US) 객체를 생성한다

element.getContext() method는 캔버스의 드로잉 컨텍스트를 반환하며,
어떤 것을 그릴지 선택한다고 생각하면 된다(렌더링 타입을 정함)

간단한 직사각형을 그려보자

    context.beginPath();
    context.rect(0, 0, 400, 400); 
    context.fillStyle = "lightgray";
    context.fill();
    context.closePath();

rect는 직사각형을 그린다면 arc는 부채꼴을 그릴 수 있다

	context.beginPath();
	const arcRadius = 20; // 반지름
	// arc는 시작점으로 정해준곳이 중점이다
    // 각도 인자에서 radius를 사용하기 때문에 2 * Math.PI가 360도 회전이다
    context.arc(canvas.width / 2 , canvas.height / 2, arcRadius, 0 , 2 * Math.PI,); 
    context.fillStyle = "blue";
    context.fill();
    context.closePath();

2. canvas의 도형을 움직여보자

canvas에서 도형을 움직이는 것은 setInterval 함수를 이용해 일정시간마다 캔버스에 도형을 렌더함으로써 수행할 수 있다

    const canvas = document.getElementById("myCanvas");
	const context = canvas.getContext("2d");	

    let posX = canvas.width / 2 - 50;
    let posY = canvas.height / 2 - 50;

    function moveRect() {
      context.clearRect(0, 0, canvas.width, canvas.height); 
      // canvas를 clear해주는 역할을 하며 해당 명령이 없으면 기존에 그린것들이 남아있기에 도형이 이동하는 것이 아니라 옆으로 늘어나는것처럼 작동한다
      posX ++;
      context.beginPath();
      context.rect(posX, posY, 100, 100); 
      context.fillStyle = "blue";
      context.fill();
      context.closePath();
    }
    setInterval(moveRect,10);

위의 코드대로 하면 rect는 canvas를 벗어나 시야에서 사라지게 된다

이번에는 canvas 안쪽에서 arc가 다양한 속도의 왕복 운동을 할 수 있게 바꿔보자
이를 위해서 기능별로 함수를 구분하고 변수를 추가해줄 것이다

const canvas = document.getElementById("myCanvas");

const context = canvas.getContext("2d");

let arcPosX = canvas.width / 2; // 원의 중심 x축 좌표
let arcPosY = canvas.height / 2; // 원의 중심 y축 좌표

const arcRadius = 20;
// 처음 방향변수를 지정할 때는 "left", "right" 등으로 주고 특정 조건일 때 바뀌는 것으로 하려고 했으나 
// 1, -1로 하니 번거로운 작업을 할 필요 없어짐
let arcMvDirX = 1; // 원의 x축 방향
let arcMvDirY = 1; // 원의 y축 방향
let arcMvSpd = 2; // 원의 이동 속도

function update() 
{
    // 데이터 수정 function ex) 도형의 위치 이동
  
    // arc X축

    if(arcPosX < arcRadius) { //canvas의 왼쪽 끝에 원이 도착했을 때
        arcMvDirX = 1; // 방향을 오른쪽으로 바꾼다
      	arcMvSpd++; // 속도에도 변화를 줄 수 있다
    }
    else if(arcPosX > canvas.width - arcRadius) {
        arcMvDirX = -1;
      	arcMvSpd = 3;
    }

    // arc Y축

    if(arcPosY -arcRadius < 0) 
    {
        arcMvDirY = 1;
    }
    else if(arcPosY + arcRadius > canvas.height) 
    {
        arcMvDirY = -1;
    }

    arcPosX += arcMvDirX * arcMvSpd; // 방향 * 속력으로 속도를 정해줄 수 있다
    arcPosY += arcMvDirY * arcMvSpd;
}

function draw() 
{
  	// canvas와 도형을 그리는 function
  
    // 화면 클리어
    context.clearRect(0, 0, canvas.width, canvas.height);

    // 다른 도형 그리기 
    drawCanvas();
    drawArc();
}

function drawCanvas() 
{
    context.beginPath();

    context.rect(0, 0, 400, 400); // 시작점이 좌상단 모서리
    context.fillStyle = "lightgray";
    context.fill();
    
    
    context.closePath();
}

function drawArc() 
{
    context.beginPath();

    context.arc(arcPosX, arcPosY, arcRadius, 0 , 2 * Math.PI); 
    context.fillStyle = "blue";
    context.fill();


    context.closePath();
}

setInterval(update, 10);
setInterval(draw, 10);

@함수, 변수 선언에 있어 항상 생각하고 효율적으로 짜보는 습관을 들이자