23_10_05 JS공부정리

https://nomadcoders.co/javascript-for-beginners-2/lectures/3737

[노마드코더]1.2강~2.2강

 

ctx.rect(50, 50, 100, 100); //(시작x좌표, 시작y좌표, 너비, 높이)

ctx.stroke();

rect이후 stroke()

ctx.rect(50, 50, 100, 100);

ctx.fill();

rect이후 fill()

ctx.rect(50, 50, 100, 100);

ctx.rect(150,150,100,100);

ctx.fill();

ctx.rect(250,250,100,100);

fill()이전 것들만 그려짐.

ctx.rect(50, 50, 100, 100); 

ctx.rect(150,150,100,100);

ctx.rect(250,250,100,100);

ctx.fill();

ctx.rect(350,350,100,100);

ctx.fillStyle="red" // 색변경

ctx.fill(); //모두 같은 경로로 그렸기 때문에 red를 설정할때 모두 red가 됨

fillStyle="red"을 통해 빨간색으로 변경

ctx.rect(50, 50, 100, 100);

ctx.rect(150,150,100,100);

ctx.rect(250,250,100,100);

ctx.fill();

ctx.beginPath(); //새로운 경로를 설정하여 이전과는 새로운 선을 그림으로써 아래의 코드만 "red"속성을 받음

ctx.rect(350,350,100,100);

ctx.fillStyle="red"

ctx.fill();

beginPath();를 통해 새로운 선을 그림.

ctx.moveTo(50, 50); //선을 그리지않으면서 펜을 옮김. 초기값은 0,0으로 설정되어있음

ctx.lineTo(150, 50); //선을 그리면서 펜을 옮김  / x:50, y:50에서 x:150, y:50으로 선을 그리며 이동

ctx.stroke(); //선을 채우는 함수. 이게 없으면 선이 안보임

(50,50) -> (150,50)

ctx.moveTo(50, 50);

ctx.lineTo(150, 50);

ctx.lineTo(150, 150); // x:150, y:50에서 x:150 y:150으로 이동하며 선을 그림

ctx.stroke();

(50,50) -> (150,50) / (150,50) -> (150,150)

ctx.moveTo(50, 50);

ctx.lineTo(150, 50);

ctx.lineTo(150, 150);

ctx.lineTo(50, 150);

ctx.lineTo(50, 50);  //ctx.rect(50,50,100,100)과 동일

ctx.stroke();

moveTo()와 lineTo()를 이용해 사각형을 그릴 수 있다.

ctx.fillRect(200,200,50,200);

ctx.fillRect(400,200,50,200);

ctx.lineWidth = 2;

//stroke를 그린다음에 lineWidth를 설정해봐야 의미가 없으므로, 그릴 것의 lineWidth를 이렇게 먼저 설정해줘야함

ctx.strokeRect(300,300,50,100);

-js로 집모양 만들기(lineWidth, 삼각형그리기 참고)

ctx.fillRect(200,200,50,200);

ctx.fillRect(400,200,50,200);

ctx.lineWidth = 2; //stroke를 그린다음에 lineWidth를 설정해봐야 의미가 없으므로, 그릴 것의 lineWidth를 이렇게 먼저 설정해줘야함

ctx.fillRect(300,300,50,100);

ctx.fillRect(200, 200, 200, 20);

ctx.moveTo(200,200);

ctx.lineTo(325,100);

ctx.lineTo(450,200);

ctx.fill(); //moveTo와 lineTo로 삼각형 만드는 코드 4줄

집모양 만들기

ctx.arc(250, 100, 20, 0, 2*Math.PI); //(x축, y축, 반지름, start angle , end angle)

ctx.fill();

start angle = 0 / end angle = 2

ctx.arc(250, 100, 20, 0, 1.5*Math.PI); //(x축, y축, 반지름, start angle , end angle)

ctx.fill();

start angle = 0 / end angle = 1.5

start angle과 end angle에 관한 설명

-js로 사람그리기

ctx.fillRect(210 - 40, 200 - 20, 15, 100);

ctx.fillRect(350 - 40, 200 - 20, 15, 100);

ctx.fillRect(260 - 40, 200 - 20, 60, 200);

ctx.arc(250, 100, 50, 0, 2*Math.PI);  

ctx.fill();

ctx.beginPath();

ctx.fillStyle = "white";

ctx.arc(220+10, 80, 8, Math.PI, 2*Math.PI); 

ctx.arc(260+10, 80, 8, Math.PI, 2*Math.PI); //반원

ctx.fill();

사람..

-마우스 움직임에따라 선이 그려지는 코드

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d")

canvas.width = 800;

canvas.height = 800;

const colors = [

    "#cd84f1",

    '#ffb8b8',

    '#ff4d4d',

    '#ff9f1a',

    '#fffa65',

    '#32ff7e',

    '#67e6dc',

    '#18dcff',

    '#7d5fff'

]

ctx.lineWidth = 2;

function onClick(event) {

    ctx.moveTo(0,0);

    const color = colors[Math.floor(Math.random() * colors.length)]; //선 색깔을 랜덤으로 선택

    ctx.strokeStyle= color;

    ctx.lineTo(event.offsetX, event.offsetY); //마우스움직임이 발생한 좌표를 선택하여 선 그리기

    ctx.stroke();

    ctx.beginPath(); //매번 새로운 색깔이 나오도록 새 경로를 만들어주기

}

canvas.addEventListener("mousemove", onClick);

재밌다.

-마우스를 누르고 땔때까지 선이 그려지는 그림판

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d")

canvas.width = 800;

canvas.height = 800;

ctx.lineWidth = 2;

let isPainting = false;

function onMove(event){

    if(isPainting){ //플래그변수를 이용해 마우스를 누르고있을때만 그려지게 만듬.

        ctx.lineTo(event.offsetX,event.offsetY)

        ctx.stroke();

        return;

    }

    ctx.moveTo(event.offsetX,event.offsetY);

}

function startPainting(evnet){

    isPainting = true;

}

function cancelPainting(evnet){

    isPainting = false;

}

canvas.addEventListener("mousemove", onMove)  

canvas.addEventListener("mousedown", startPainting)

canvas.addEventListener("mouseup", cancelPainting)

canvas.addEventListener("mouseleave", cancelPainting) //캔버스 밖으로나갈때 발생하는 이벤트

//마우스를 누르고 때는것 : 클릭, 마우스를 누르는것 : mousedown, 마우스에서 떼는것 : mouseup

곡선도 자유자재로 그려진다.