본문 바로가기

HTML

 (21)
HTML <canvas> globalAlpha - 투명도 설정하기 1. globalAlpha globalAlpha 는 도형의 투명도를 설정합니다. 또 다른 방법으로는 윤곽선(strokeStyle) 또는 채움(fillStyle) 스타일에 반투명 색을 적용할 수도 있습니다. globalAlpha = transparencyValue; 투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다. globalAlpha 는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만 보통은 각가의 도형마다 투명도롤 설정하는 것이 더 유용할 것입니다. strokeStyle 과 fillStyle 값에 CSS rgba 색상값은 적용할 ..
HTML <canvas> fillStyle, strokeStyle - 색상 설정하기 1. 색상 적용하기 fillStyle 과 strokeStyle 은 도형에 색을 적용할 때 사용합니다. fillStyle 은 도형의 채우는 색을 설정할 때, strokeStyle 은 도형의 윤곽선 색을 설정할 때 사용합니다. fillStyle = color; strokeStyle = color; 여기서의 color는 CSS의 , 그라디언트 객체, 패턴 객체를 뜻합니다. 윤곽선과 채움 색의 초기 설정값은 검은색(#000000) 입니다. strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 fillStyle 또는 strokeStyle속성을 다시 적용해야 합니다. fillStyle 과 strokeStyle 의 c..
HTML <canvas> Path2D 오브젝트 (Path2D objects) 1. Path2D 오브젝트 (Path2D objects) 캔버스를 사용할 때, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수 잇는 Path2D 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이는 경로를 빠르게 다시 실행 시킬 수 있습니다. Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다. new Path2D(); // empty path object new Path2D(path); // copy from another Path2D object ne..
HTML <canvas> rect() 함수 - 직사각형 그리기 1. rect() rect() 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다. rect(x, y, width, height); 좌측상단이 (x, y)이고 폭과 높이가 width 와 height 인 직사각형을 그립니다. 이 메소드가 실행되기 전에 (x, y) 매개변수를 가진 moveTo() 메소드가 자동으로 호출됩니다. 즉, 현재의 펜 위치가 자동으로 기본 좌표로 초기화 됩니다. 2. 예제 function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.rect(25, 25, 300, 300); ctx...
HTML <canvas> 베지어(Bezier) 곡선과 이차(Quadratic) 곡선 1. 베지어(Bezier) 곡선과 이차(Quadratic )곡선 베지어 곡선은 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 보통 복잡한 유기체적 형태를 그리는데 사용됩니다. quadraticCurveTo(cp1x, cp1y, x, y); cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다. bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); (cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다. 오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명합니다. 이차 베지에 곡선은 시작점과..
HTML <canvas> arc(), arcTo() 함수 - 호나 원 그리기 1. arc() arc() 함수는 (x, y) 위치에 원점을 두면서, 반지름 r을 가지고 startAngle 에서 시작하여 endangle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다. arc(x, y, radius, startAngle, endAngle, anticlockwise); 2. arcTo() arcTo() 함수는 주어진 제어점들과 반지름으로 호를 그리고, 이전 점과 직선으로 연결합니다. arcTo(x1, y1, x2, y2, radius); x 호 중심의 수평 좌표입니다. y 호 중심의 수직 좌표입니다. radius 호의 반지름입니다. startAngle 호가 시작점으로, 양의 x축에서 측정됩니다. endAngle 호가 끝나는점으..
HTML <canvas> lineTo() 함수 - 직선 그리기 1. lineTo() lineTo() 함수는 직선을 그릴 때 사용합니다. lineTo(x, y); 현재 드로잉 위치에서 지정된 (x, y) 위치까지 선을 그립니다. 이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 moveTo() 메소드를 통해 변경될 수 있습니다. 2. 예제 function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // Filled triangle ctx.beginPath(..
HTML <canvas> moveTo()함수 - 펜 이동하기 1. moveTo() moveTo()함수란 에서 실제로 어떤 것도 그리지 않지만 경로의 일부가 되는 함수 입니다. 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 볼 수 있습니다. moveTo(x, y); 캔버스가 초기화 되었거나 beginPath() 메소드가 호출되었을 때, 특정 시작점 설정을 위해 moveTo() 함수를 사용하는 것이 좋습니다. 또한 moveTo() 함수는 연결되지 않은 경로를 그리는데에도 사용할 수 있습니다. 2. 예제) 스마일 그리기 function draw() { var canvas = document.getElementById('tutorial'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.beginP..

티스토리툴바