본문 바로가기

분류 전체보기

 (185)
HTML <canvas> lineJoin - 도형의 모서리 모양 설정하기 1. lineJoin lineJoin 속성은 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외됩니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는 lineJoin을 설정해도 아무런 효과도 나타나지 않습니다. round : 도형의 모서리를 연결되는 부분들의 공통점 끝을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다. bevel : 도형의 모서리를 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다. miter : 초기 설정값입니다. 도형의 모서리를 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. miterLimit 속성값에 따라 모양이 ..
HTML <canvas> lineCap - 선 끝점 모양 설정하기 선 모양 설정하기 lineWidth = value 이후 그려질 선의 두께를 설정합니다. lineCap = type 선의 끝 모양을 설정합니다. lineJoin = type 선들이 만나는 "모서리"의 모양을 설정합니다. miterLimit = value 두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다. getLineDash() 음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다. setLineDash(segments) 현재 선의 대시 패턴을 설정합니다. lineDashOffset = value 선의 대시 배열이 어디서 시작될지 지정합니다. lineCap = type lineCap 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. b..
HTML <canvas> lineWidth - 선 두께 설정하기 선 모양 설정하기 lineWidth = value 이후 그려질 선의 두께를 설정합니다. lineCap = type 선의 끝 모양을 설정합니다. lineJoin = type 선들이 만나는 "모서리"의 모양을 설정합니다. miterLimit = value 두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다. getLineDash() 음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다. setLineDash(segments) 현재 선의 대시 패턴을 설정합니다. lineDashOffset = value 선의 대시 배열이 어디서 시작될지 지정합니다. lineWidth = value 현재 선의 두께를 설정합니다. 설정값은 반드시 양수여야하며, 초..
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로 지정된 끝점까지 삼차 베지어 곡선을 그립니다. 오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명합니다. 이차 베지에 곡선은 시작점과..

티스토리툴바