목록티스토리 (214)
EverGiver
매개변수, 인수, return 매개변수 - 함수를 선언할 때부터 외부에서 값을 받아 줄 변수 - 함수를 호출할 때 괄호 안에 매개변수의 이름을 넣는다. - 매개변수에 이름을 붙이는 방법은 일반적인 변수 이름을 붙이는 것과 같다. - 매개변수는 선언된 함수 안에서만 사용되며, 매개변수를 여러 개 사용할 때는 매개변수 이름 사이에 쉼표(,)를 나열한다. - 매개변수는 다른 변수와 겹치지 않는 이름을 사용하면 된다. 인수 - 매개변수가 있는 함수를 호출할 때 실제 값 부분 return - 결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치를 돌려줘야 하는데 이런 동작을 값을 반환한다(return)고 한다. - 함수의 결괏값을 반환할 때는 예약어 return을 사용해서 다음에 넘겨줄 값을 지정해 주면 된다. ..
여러 동작을 묶은 덩어리, 함수 함수(function) - 동작해야 할 목적대로 묶은 명령이다. - 함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있고, 묶은 기능에 이름을 붙여서 어디서든 같은 이름으로 명령을 실행할 수 있다. 함수 선언 및 호출 함수를 사용하는 가장 기본적인 방법은 함수를 만들 때 이름을 붙이고 필요할 때마다 함수 이름을 사용해 실행하는 것이다. 함수 선언 / 함수 정의 - 어떤 명령을 처리할지 미리 알려 주는 것 함수마다 서로 다른 이름을 붙여 나중에 사용할 때 알아보기 쉽도록 한다. 함수를 선언할 때는 예약어 function을 사용하고, 중괄호({ }) 안에 실행할 여러 명령을 넣는다. function 함수명(){ 명령 } 함수 호출 / 함수 실행 - 함수를 선언한 ..
Array 객체 Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. (배열이란 하나의 변수에 값을 여러 개 저장할 때 사용한다.) Array 객체로 배열 만들기 - 초기값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다. - 초깃값이 없는 경우 var numbers = new Array();// 배열의 크기를 지정하지 않음 var numbers = new Array(4);// 배열의 크기를 지정함 - 초깃값이 있는 경우 var numbers = ['one','two','three','four'];// 배열 선언 var numbers = Array('one','two','three','four');// Array 객체를 사용한 배열 ..
Canvas Text fillText(text,x,y) - 색상이 채워져 있는 텍스트를 작성하는 메소드 - x와 y는 텍스트의 x와 y 좌표이고 fillStyle 속성으로 기본 값은 #000000 이다. font - 글자의 속성을 지정하는 속성 - 기본 값은 10px sans-serif이고 사용 방법은 css의 font 속성과 거의 동일하다. const canvas37 = document.getElementById('canvas37'); const ctx37 = canvas37.getContext('2d'); ctx37.font = 'bold 7em Arial,sans-serif'; ctx37.fillStyle=gra3; ctx37.fillText('Canvas',100,240); strokeText(..
Transformations scale(scalewidth, scaleheight) - 현재 드로잉의 좌표 공간을 수평/수직 방향으로 확대/축소하는 메소드 - scalewidth/scaleheight 수치는 1을 100%로 하여 배율로 지정한다. - 이미 scale()이 적용되었을 경우 이후의 모든 드로잉에 동일한 비율로 적용이 된다. - scale 메서드를 연속하여 사용할 경우 초기값 기준이 아닌, 전에 정의한 좌표 공간의 값 기준으로 중첩되어 사용된다. - 음수값을 사용하면 진행 방향이 반대로 그려진다. const canvas30 = document.getElementById('canvas30'); const ctx30 = canvas30.getContext('2d'); ctx30.strokeRect..
Path fill() - 정의한 패스 면을 채우는 메소드 - fillStyle 속성으로 색상, 그라디언트, 패턴을 정의할 수 있다. - 지정한 패스가 닫혀있지 않을 경우 fill() 메소드가 마지막 점과 시작점을 이어서 닫힌 패스로 만든 후 면을 채운다. - 기본값 #000000 const canvas15 = document.getElementById('canvas15'); const ctx15 = canvas15.getContext('2d'); ctx15.beginPath(); ctx15.rect(50,50,300,200); ctx15.fillStyle = gra1; ctx15.fill(); ctx15.beginPath(); ctx15.moveTo(250,150);ctx15.lineTo(500,150)..