HTML <canvas> 그라디언트(Gradient)
1. 그라디언트 다른 그래픽 프로그램들과 마찬가지로 캔버스에서도, 도형에 그라디언트를 사용할 수 있습니다. 아래의 메소드 중 하나를 사용하여 객체를 생성합니다. 그 다음 이 객체를 fillStyle 또는 strokeStyle 속성에 할당할 수 있습니다. createLinearGradient(x1, y1, x2, y2); 시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를(x2, y2)로 하는 선형 그라디언트 객체를 생성합니다. createRadialGradient(x1, y1, r1, x2, y2, r2); 반지름이 r1이고 좌표(x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표(x2, y2)를 중심으로 하는 원을 사용하여 그라디언트 객체를 생성합니다. gradient.addColorStop..
HTML <canvas>를 이용한 직사각형 그리기
어떠한 도형을 그릴 때 정해야할 것이 있습니다. 어떤 모양의 도형인지 어떤 크키의 도형인지 어디에 그릴건지 먼저 는 기본적으로 직사각형의 도형을 제공합니다. 직사각형을 그리는데에는 세가지 함수가 있습니다. fillRect(x, y, width, height) : 색칠된 직사각형을 그리는 함수(기본 색은 검정) strokeRect(x, y, width, height) : 직사각형 윤곽선을 그리는 함수 clearRect(x, y, width, height) : 특정 부분의 직사각형을 지우는 함수(지운다 = 투명하게 만든다) 각가의 세 함수는 모두 같은 매개변수를 가집니다. x : 사각형 시작점의 x축 좌표 y : 사각형 시작점의 y축 좌표 width : 사각형의 너비, 양수값은 오른쪽 음수는 왼쪽으로 이동 ..
