함수

함수는 코딩할 때 필수적인 항목 중 하나다.

하나의 코드를 여러곳에서 불러오고자할 때 함수를 호출하여 이용한다.

함수는 내장 함수와 사용자 정의 함수가 있다.

내장 함수

요소 이름.함수 이름();

이런식으로 입력을 한다.

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);

자세한 사항은 MDN Web Docs - Standard built-in objects를 참고하자.

사용자 정의 함수

function 함수 이름() { ... }

요소 이름.함수 이름();

이런식으로 입력을 한다.

<button>Update</button>

<canvas></canvas>

html {
width: 100%;
height: inherit;
}

canvas {
display: block;
}

body {
margin: 0;
}

button {
position: absolute;
top: 5px;
left: 5px;
}

const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let WIDTH = document.documentElement.clientWidth;
let HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH;
canvas.height = HEIGHT;

function random(number) {
return Math.floor(Math.random()*number);
}

function draw() {
ctx.clearRect(0,0,WIDTH,HEIGHT);
for(let i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
}

btn.addEventListener('click',draw);

사용된 코드 설명

const ctx = canvas.getContext('2d');

:

변수 ctx를 선언하고 2d 드로잉 컨텍스트에 접근한다.

let WIDTH = document.documentElement.clientWidth;

:

WIDTH 변수를 만들고 clientWidth의 가로 넓이를 저장한다.

canvas.width = WIDTH;

:

canvas 요소의 가로 값을 변수 WIDTH 값을 불러와서 사용한다.

function random(number) { ... }

:

random()함수와 매개변수 number를 선언한다.

return Math.floor(Math.random()*number);

:

0과 1사이의 무작위 소수를 생성하고 * number 값과 곱한 후 소수점 이하 숫자를 반올림하여 반환한다.

ctx.clearRect(0,0,WIDTH,HEIGHT);

:

canvas 지우기

ctx.beginPath();

:

새로운 경로를 만든다.

ctx.fillStyle = 'rgba(255,0,0,0.5)';

:

도형을 'rgba(255,0,0,0.5)' 색상으로 채운다.

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

:

원을 x 좌표 WIDTH, y 좌표 HEIGHT, 반지름 50이 지정된다. 원을 만들기 위해 아크는 0 라디안 (0 °)의 각도에서 시작하여 2π 라디안 (360 °)의 각도로 끝난다.

ctx.fill();

:

내부가 채워진 도형을 그린다.

btn.addEventListener('click',draw);

:

btn 클릭했을 때 draw 함수를 불러온다.

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기