2.JavaScriptキャンバス

1.canvasを使用してグラフィックを描画する

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

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

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

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

	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のグラフィックを移動する

    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);

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);