캔버스를 배우려면 먼저 선분을 그리는 방법을 알아야 하며, 그런 다음 간단한 선분을 많이 사용하여 보다 복잡한 그래픽을 구현할 수 있습니다. 예를 들어 일반적인 차트, 막대 차트, 선 차트 등은 모두 선분을 통해 구현됩니다.
기본 지식캔버스에 대한 기본 지식은 많지 않습니다. 선분, 그래픽, 그림, 텍스트 등을 그리는 방법을 주로 알고 있습니다. 브라우저에서 캔버스를 그릴 수도 있고, node-canvas의 도움으로 노드 서버에서 간단한 그림을 그릴 수도 있습니다. 본 글은 브라우저에서의 드로잉만을 기록하고 있으며, 노드측에서 그리는 방법은 직접 확인하실 수 있습니다.
브라우저에서 그리려면 먼저 HTML에서 캔버스 요소를 정의합니다. 기본 너비와 높이는 300 * 150이며 width 와 height 로 설정할 수 있습니다. 캔버스 요소 스타일의 너비와 높이는 캔버스 그리기 캔버스의 너비와 높이가 동일하지 않다는 점에 유의하세요.
<canvas id=canvas> <p>현재 브라우저는 캔버스를 지원하지 않습니다. 브라우저를 업그레이드하세요.</p></canvas>
그리기 전에 먼저 현재 캔버스의 2D 드로잉 컨텍스트 컨텍스트를 획득하고, 이후 컨텍스트를 조작하여 그려야 합니다.
let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('캔버스 요소를 찾을 수 없습니다');}// 참고 2d. 매개변수는 소문자여야 합니다. // 매개변수를 설정합니다. webgl을 사용하면 3D 드로잉 컨텍스트를 얻을 수 있습니다. let ctx = canvas.getContext('2d'); 참고: 위의 코드 조각은 후속 예제에서 무시되며 ctx 변수는 캔버스의 2D 그리기 컨텍스트를 나타내는 데 직접 사용됩니다.
캔버스 2D 도면의 좌표계를 살펴보겠습니다. 현재 캔버스 요소의 왼쪽 상단은 좌표 원점(0,0)이고, 오른쪽의 가로 방향은 X축의 양의 방향이며, 수직 아래쪽 방향은 아래와 같이 Y축의 양의 방향입니다. 일부 애니메이션을 구현하기 위해 변환, 회전 및 크기 조정을 통해 좌표계를 조작할 수 있습니다. 이 부분은 애니메이션 지식 섹션에서 자세히 설명합니다.
선분 간단한 선분을 그릴 때 일반적으로 색상, 선 너비, 선 끝점 스타일 등 선분의 스타일을 먼저 설정합니다. rgba 또는 합법적인 16진수일 수 있는 strokeStyle 설정하여 ctx 의 전역 그리기 스타일을 설정합니다. 색상, 값 또는 그라데이션 개체 등 다음 코드는 단순히 (10,10)에서 (50,60)까지 너비가 10인 빨간색 선분을 그립니다.
ctx.스트로크스타일 = '빨간색';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.스트로크();
먼저 선분 그리기와 관련된 메서드와 속성을 살펴보겠습니다.
관련 속성:
관련 방법:
동일한 선분을 그리려면 서로 다른 lineCap 값을 설정해 보세요.
ctx.lineWidth = 10;ctx.textAlign = 'center';let colors = ['red', 'green', 'blue'];let lineCaps = ['butt', 'round', 'square'];for ( let [index, lc] of lineCaps.entries()) { ctx.StrokeStyle = colors[index]; //선분의 색상을 설정합니다. ctx.lineCap = lc; ctx.beginPath(); // 현재 경로 지우기 ctx.moveTo(10, 20 + 20 * index) ctx.lineTo(50, 20 + 20 * index); 80 , 25 + 20 * 색인);} 위 그림의 결과에서 알 수 있듯이 lineCap 원형 및 정사각형으로 설정하면 원형은 호 스타일이고 정사각형은 직사각형인 점을 제외하고 원래 선분의 양쪽 끝에 특정 길이의 끝점이 추가됩니다. 스타일. 한 가지 주목할 점은 캔버스 그리기 컨텍스트에 동시에 하나의 현재 경로만 존재할 수 있다는 것입니다. 다른 선 세그먼트를 그리려면 각 그리기 전에 beginPath() 호출하여 현재 경로를 지우고 새 경로를 시작해야 합니다.
서로 다른 lineJoin 값을 사용하여 두 선분의 초점에 스타일을 그려보겠습니다.
ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let colors = ['red', 'green', 'blue'];let lineJoins = ['bevel', 'round' , 'miter'];for (lineJoins.entries()의 let [index, lj]) { ctx.StrokeStyle = colors[index]; //선 세그먼트의 색상 설정 ctx.lineJoin = lj; //lineJoin 설정 ctx.beginPath(); //현재 경로 지우기 ctx.moveTo(10 + 80 * index, 20); 80 * 인덱스, 20); ctx.lineTo(50 + 80 * 인덱스, 60); ctx.fillText(lj, 40 + 80 * 인덱스, 80);} 세 가지 유형 lineJoin 두 선분의 초점을 처리하는 방식이 서로 다르다는 것을 알 수 있습니다. 그 중 lineJoin=miter 설정 시, miterLimit 속성을 설정하여 마이터 선 길이의 최대 비율을 선 너비의 절반으로 설정할 수 있습니다. 이 비율을 초과하면 lineJoin 베벨 방식을 채택합니다.
캔버스에는 실선뿐만 아니라 점선도 그릴 수 있습니다. lineDashOffset 속성을 설정하고 setLineDash() 호출하여 점선을 그립니다.
ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //실선 부분의 8픽셀, 간격 부분의 8픽셀을 나타냅니다. let colors = ['red', 'green', 'blue'];let lineDashOffsets = [1, 2, 4];for (lineDashOffsets.entries()의 [index, ldOffset]을 허용함) { ctx.StrokeStyle = colors[index]; //선 세그먼트 색상 ctx.lineDashOffset = ldOffset; //오프셋이 설정됩니다. ctx.beginPath()(10, 20 + 20 * index); 100, 20 + 20 * 인덱스); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * index);} 그림에서 볼 수 있듯이 lineDashOffset 은 점선 그리기를 시작하기 위해 설정된 오프셋입니다. setLineDash() 메소드는 배열 매개변수를 허용합니다. 배열 수가 홀수이면 기본적으로 현재 배열 요소를 복사하여 짝수로 만듭니다. 0번째 요소부터 실선 부분의 길이를 나타내고, 1번째 요소는 틈 부분의 길이를 나타내고, 2번째 요소는 실선 부분의 길이를 나타내고, 3번째 요소는 틈 부분의 길이를 나타냅니다. 배열의 마지막 요소에 도달하면 처음부터 다시 시작됩니다.
ctx.lineWidth = 10;ctx.textAlign = 'center';let colors = ['red', 'green', 'blue', 'gray'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (lineDashes.entries()의 [index, ld]를 설정) { ctx.StrokeStyle = colors[index]; //색상 설정 ctx.setLineDash(ld); //lineDash 설정 ctx.beginPath()(10, 20 + 20 * index); + 20 * 인덱스); ctx.Stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * 색인);} let lineDashOffset = 0; //초기 lineDashOffsetctx.StrokeStyle = 'green';function animate() { if (lineDashOffset > 25) { lineDashOffset = 0 } ctx.clearRect(0, 0, width, height); 현재 캔버스 ctx.lineDashOffset = -lineDashOffset //lineDashOffset 설정; ctx.setLineDash([4, 4]); //실선의 길이와 간격의 길이를 설정합니다. ctx.lect(20, 20, 100, 100) //직사각형을 그립니다. //캔버스에 현재 경로를 추가합니다. Stroke lineDashOffset += 1; //lineDashOffset 오프셋 + 1 window.requestAnimationFrame(animate); //브라우저 프레임 속도를 사용하여 애니메이션 함수를 반복적으로 실행합니다.}animate(); 요약 선분을 그릴 때 캔버스의 현재 경로에 대한 개념을 이해해야 합니다. 특정 순간에 캔버스에는 현재 경로가 하나만 있습니다. 새 경로를 시작할 때 beginPath() 호출해야 합니다. lineWidth , lineCap 및 lineJoin 설정하여 선분의 그리기 스타일을 설정할 수 있습니다. 선분을 스트로크할 때, strokeStyle 통해 선분의 색상을 설정할 수 있습니다.
캔버스에서는 실선을 그릴 수 있을 뿐만 아니라 lineDashOffset 및 setLineDash() 통해 점선도 그릴 수 있습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.