<canvas></canvas> 는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 실제로 이 태그의 특별한 특징은 이 태그가 JavaScript 스크립트를 사용할 수 있는 CanvasRenderingContext2D 개체를 얻을 수 있다는 것입니다. 그리기 위해 이 개체를 제어합니다.
<canvas></canvas> 는 단지 그래픽을 그리기 위한 컨테이너일 뿐입니다. ID, 클래스, 스타일과 같은 속성 외에도 높이 및 너비 속성도 있습니다. <canvas>> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.
<canvas> 요소에 해당하는 DOM 객체를 가져옵니다. 다음은 간단한 <canvas> 그리기 예입니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>캔버스 그리기 데모</title> <style type=text/css> #canvas{ border: 1px solid #ADACB0; 표시: 블록; 여백: 20px 자동 } </style></head><body> <canvas id=canvas width=300 height=300> 브라우저가 아직 캔버스를 지원하지 않습니다. </canvas></body><script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); 및 끝점 context.moveTo(10,10); context.lineTo(200,200); //스타일 설정 context.lineWidth = 2; #F5270B; //컨텍스트 그리기();</script></html>moveTo()를 통해 지정하지 않으면 lineTo()의 시작점은 이전 지점을 기준으로 합니다. 따라서 시작점을 다시 선택해야 하는 경우 moveTo() 메서드를 전달해야 합니다. 다양한 선분에 대한 스타일을 설정해야 하는 경우 context.beginPath()를 통해 경로를 다시 열어야 합니다. 예는 다음과 같습니다.
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //객체의 시작점과 끝점을 설정합니다. context.beginPath(); 100,100); context.lineTo(700,400); context.lineWidth = 2; #F5270B; //Context.beginPath(); context.moveTo(100,200); //여기서 moveTo를 lineTo로 바꾸는 효과는 동일합니다. context.lineTo(600,200); ) ; //StrokeStyle의 색상에 새 값이 있으면 위에서 설정한 값을 덮어씁니다. //lineWidth에 새 값이 없으면 위에서 설정한 값에 따라 표시됩니다. context.Stroke();</script >
직사각형 그리기 ret(), fillRect() 및 strokeRect()
<script type=text/javascript> var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //Rect 메소드를 사용하세요. context.direct(10,10,190,190) context.lineWidth; . fillStyle = #3EE4CB; context.StrokeStyle = #F5270B; context.fill(); //fillRect 메소드 사용 context.fillStyle = #1424DE; context.fillRect(210,10,190,190); //StrokeRect 메소드 사용 context.StrokeStyle = #F5270B; //textRect 메소드 및 fillRect 사용 동시에 메소드 context.fillStyle = #1424DE; #F5270B; context.StrokeRect(610,10,190,190); context.fillRect(610,10,190,190);</script>
여기서는 두 가지 점을 설명해야 합니다. 첫 번째 점은 스트로크() 및 fill()이 그려지기 전과 후의 순서입니다. fill()이 나중에 그려지면 획 테두리가 더 커질 때 스트로크()에 의해 그려지는 테두리가 됩니다. 두 번째 포인트: fillStyle 또는 스트로크 스타일 속성을 설정할 때 rgba(255,0,0,0.2)의 설정 방법을 통해 설정할 수 있습니다. 이 설정의 마지막 매개변수는 투명도입니다.
직사각형 그리기와 관련된 또 다른 방법이 있습니다: 직사각형 영역 지우기: context.clearRect(x,y,width,height).
수신된 매개변수는 투명 직사각형의 시작 위치와 직사각형의 너비 및 길이입니다.
위 코드에서 그래프 그리기 끝에 다음을 추가합니다.
context.clearRect(100,60,600,100);
다음과 같은 효과를 얻을 수 있습니다.
다섯개 별을 그려보세요다섯개 별을 분석하면 각 꼭지점의 좌표 규칙을 확인할 수 있습니다. 여기서 주목해야 할 점은 캔버스에서 Y축 방향이 아래쪽을 향하고 있다는 것입니다.
해당 코드는 다음과 같습니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //정점의 좌표를 설정하고 정점을 기반으로 경로를 공식화합니다. for (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200) context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200) } context.closePath(); //테두리 스타일 및 채우기 색상 설정 context.lineWidth=3; context.StrokeStyle = #F5270B;최종 효과:
선 속성위에 사용된 lineWidth 속성 외에도 라인에는 다음 속성도 있습니다.
lineCap 속성은 줄 끝의 줄 끝 스타일을 설정하거나 반환하며 다음 값을 사용할 수 있습니다.
lineJoin 속성은 두 선이 만날 때 생성되는 모서리 유형을 설정하거나 반환합니다. 다음 값을 사용할 수 있습니다.
miterLimit 속성은 최대 마이터 길이(기본값은 10)를 설정하거나 반환합니다. 마이터 길이는 두 선이 만나는 내부 모서리와 외부 모서리 사이의 거리를 나타냅니다. miterLimit는 lineJoin 속성이 miter인 경우에만 유효합니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //lineCap 속성 테스트 //간단한 관찰을 위한 기준선 설정 context.moveTo(10,10); . moveTo(200,10); context.lineTo(200,200); context.lineWidth(); context.beginPath(); context.lineTo(200,50); context.lineWidth=10; //round context.beginPath() ; context.moveTo(10,100); context.lineTo(200,100); context.lineWidth=10; context.Stroke(); //square context.beginPath(); context.lineTo(200,150); context.lineWidth=10; linJoin 속성 //miter context.beginPath(); context.moveTo(300,50); context.lineTo(450,100); context.lineTo(300,150); context.lineJoin=10; context.Stroke(); context.moveTo(400,50); context.lineTo(400,150); context.lineJoin=round; context.lineWidth=10; //사각형 context.beginPath(500,50); context.lineTo(500,150); context.lineWidth=10; miterLimit 속성 context.beginPath(); context.moveTo(700,50); context.lineTo(850,100); context.lineJoin=miter; context.lineWidth=10; context.StrokeStyle();
각 속성에 따른 다양한 값의 효과는 다음과 같습니다.
채우기 스타일색상 설정 외에도 이전에 사용된 fillStyle 및 스트로크스타일은 다른 채우기 스타일도 설정할 수 있습니다. 여기서는 fillStyle을 예로 들어 보겠습니다.
선형 그래디언트사용 단계
(1) var grd = context.createLinearGradient( xstart , ystart, xend , 엔드 ) 선형 그래디언트를 생성하고 시작 및 끝 좌표를 설정합니다.
(2) grd.addColorStop(stop, color)는 선형 그래디언트에 색상을 추가합니다. stop은 0~1의 값입니다.
(3) context.fillStyle=grd가 컨텍스트에 할당됩니다.
방사형 그라데이션이 방법은 첫 번째 단계에서 수신된 매개변수가 다르다는 점을 제외하면 선형 그래디언트 방법과 유사합니다.
var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1); 시작 원 중심의 좌표와 반경, 끝 원 중심의 좌표와 반경을 받습니다.
비트맵 패딩createPattern(img,repeat-style)은 그림으로 채워지며, Repeat-style은 반복, 반복-x, 반복-y 또는 반복 없음이 될 수 있습니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //선형 그래디언트 var grd = context.createLinearGradient(10, 10, 100, 350) grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.5,#ECF811); grd.addColorStop(1,#160303); context.fillRect(10,10,100,350); grd = context.createRadialGradient(325, 200, 0, 325, 200, 200); grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.5,#ECF811); ; grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillRect(150,10,350,350); //비트맵 채우기 var bgimg = new Image(); bgimg.onload= 함수 (){ var 패턴 = context.createPattern(bgimg, 반복); context.fillStyle = 패턴; context.스트로크스타일=#F20B0B; context.fillRect(600, 100, 200,200);효과는 다음과 같습니다.
그래픽 변환변환: context.translate(x,y), 수신된 매개변수는 x축 방향의 x에 의한 원점 이동과 y축 방향의 y 이동입니다.
Scaling: context.scale(x,y), 수신된 매개변수는 x 좌표 축이 x 비율에 따라 조정되고 y 좌표 축이 y 비율에 따라 조정된다는 것입니다.
회전: context.rotate(angle), 수신된 매개변수는 좌표축의 회전 각도입니다.
그래픽을 변경한 후 다음 도면은 이전 상태를 따르므로 초기 상태로 돌아가야 하는 경우 context.save(); 및 context.restore(); 사용해야 합니다. 현재 상태:
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); //translate() context.fillStyle = #1424DE; context.fillRect (0,0,200,200); context.restore(); //scale() context.save(); #F5270B; context.scale(0.5,0.5); context.restore(); context.fillStyle = #18EB0F; .PI / 4); context.fillRect(300,10,200,200);
효과는 다음과 같습니다.
그래픽 변환과 관련된 또 다른 사항은 행렬 변환: context.transform(a, b, c, d, e, f, g)입니다. 매개변수의 의미는 다음과 같습니다.
수평 스케일링(기본값 1)
b 수평 기울기(기본값 0)
c 수직 기울기(기본값 0)
d 수직 스케일링(기본값 1)
e 수평 변위(기본값은 0)
f 수직 변위(기본값은 0)
각 매개변수의 효과는 독자들이 직접 확인할 수 있으므로 여기서는 하나씩 소개하지 않겠습니다.
곡선 그리기곡선을 그리는 데는 다음과 같은 네 가지 기능이 있습니다.
context.arc(x,y,r,sAngle,eAngle,counterclockwise) 호/곡선을 만드는 데 사용됩니다(원 또는 부분 원을 만드는 데 사용됨). 수신된 매개변수의 의미:
매개변수 |
:--- |:---|
| x | 원 중심의 x 좌표 |
|y|원 중심의 Y 좌표|
|r|원의 반경|
|sAngle|라디안 단위의 시작 각도(호 원의 3시 위치는 0도입니다)|
|eAngle|끝 각도(라디안)|
|반시계방향|선택사항. 플롯을 시계 반대 방향으로 그릴지 시계 방향으로 그릴지 지정합니다. 거짓 = 시계 방향, 참 = 시계 반대 방향 |
다음은 여러 arc() 함수의 몇 가지 예입니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.StrokeStyle = #F22D0D; context.lineWidth = 2; //원 그리기 context.beginPath(100,100, 40 ,0,2*Math.PI); context.Stroke(); //반원 그리기 context.beginPath(); context.arc(200,100,40,0,Math.PI); context.Stroke(); //시계 반대 방향으로 반원을 그립니다. context.beginPath(); context.arc(300,100,40,0,Math.PI,true) ; context.Stroke(); //닫힌 반원을 그립니다. context.beginPath(); context.arc(400,100,40,0,Math.PI); context.closePath();
효과는 다음과 같습니다.
context.arcTo(x1,y1,x2,y2,r); 두 접선 사이의 캔버스에 호/곡선을 만듭니다. 수신된 매개변수의 의미:
| 매개변수 | 의미 |
|---|---|
| x1 | 호 제어점의 x 좌표 |
| y1 | 호 제어점의 y 좌표 |
| x2 | 호 끝점의 x 좌표 |
| y2 | 호 끝점의 y 좌표 |
| 아르 자형 | 호의 반경 |
여기서 주목해야 할 점은 arcTo 함수로 그리는 곡선의 시작점은 moveTo() 함수를 통해 설정해야 한다는 것입니다. 아래에서는 둥근 사각형을 그리는 데 arcTo 함수가 사용됩니다.
function createRoundRect(context, x1, y1, width, height, radius) { // 왼쪽 상단으로 이동 context.moveTo(x1 + radius, y1) // 오른쪽 상단에 연결된 선분 추가 context.lineTo (x1 + 너비 - 반경, y1); //호 추가 context.arcTo(x1 + width, y1, x1 + width, y1 + radius, radius); // 오른쪽 하단에 연결된 선분을 추가합니다. context.lineTo(x1 + width, y1 + height - radius) // 원호를 추가합니다. context.arcTo(x1 + width, y1 + height, x1 + width - radius, y1 + height , radius); // 왼쪽 하단에 연결된 선분을 추가합니다 context.lineTo(x1 + radius, y1 + height); 호 추가 context.arcTo(x1, y1 + height, x1, y1 + height - radius, radius); // 왼쪽 상단 모서리에 연결된 선분 추가 context.lineTo(x1, y1 + radius); 호 Arc context.arcTo(x1, y1, x1 + radius, y1, radius); 캔버스 요소에 해당하는 DOM 객체를 가져옵니다. var canvas = document.getElementById('mc'); // 캔버스에 그려진 CanvasRenderingContext2D 객체를 가져옵니다. var context = canvas.getContext('2d') context. 스트로크스타일 = #F9230B; createRoundRect(컨텍스트, 30, 30, 400, 200, 50);효과는 다음과 같습니다.
context.quadraticCurveTo(cpx,cpy,x,y); 2차 베지어 곡선을 그립니다. 매개변수 의미는 다음과 같습니다.
| 매개변수 | 의미 |
|---|---|
| cpx | 베지어 제어점의 x 좌표 |
| cpy | 베지어 제어점의 y 좌표 |
| 엑스 | x 끝점 좌표 |
| 와이 | 끝점의 y 좌표 |
곡선의 시작점은 현재 경로의 마지막 점입니다. 경로가 존재하지 않으면 BeginPath() 및 moveTo() 메서드를 사용하여 시작점을 정의합니다.
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y); 다음 매개변수를 사용하여 3차 베지어 곡선을 그립니다.
| 매개변수 | 의미 |
|---|---|
| CP1X | 첫 번째 베지어 제어점의 x 좌표 |
| CP1Y | 첫 번째 베지어 제어점의 y 좌표 |
| CP2X | 두 번째 베지어 제어점의 x 좌표 |
| CP2Y | 두 번째 베지어 제어점의 y 좌표 |
| 엑스 | x 끝점 좌표 |
| 와이 | 끝점의 y 좌표 |
텍스트 렌더링에는 주로 세 가지 속성과 세 가지 방법이 있습니다.
| 재산 | 설명하다 |
|---|---|
| 세례반 | 텍스트 내용의 현재 글꼴 속성을 설정하거나 반환합니다. |
| 텍스트정렬 | 텍스트 내용의 현재 정렬을 설정하거나 반환합니다. |
| 텍스트 기준선 | 텍스트를 그릴 때 사용되는 현재 텍스트 기준선을 설정하거나 반환합니다. |
| 방법 | 설명하다 |
|---|---|
| 채우기텍스트() | 캔버스에 채워진 텍스트 그리기 |
| 스트로크텍스트() | 캔버스에 텍스트 그리기(패딩 없음) |
| 측정텍스트() | 지정된 텍스트 너비를 포함하는 객체를 반환합니다. |
위 속성과 메서드의 기본 사용법은 다음과 같습니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.font=bold 30px Arial; //스타일 설정 context.StrokeStyle = #1712F4; 내 블로그에 오신 것을 환영합니다! 30,100); context.font=bold 50px Arial; var grd = context.createLinearGradient( 30 , 200, 400, 300 );//그라디언트 채우기 스타일 설정 grd.addColorStop(0,#1EF9F7); grd.addColorStop(0.25,#FC0F31); grd.addColorStop(0.75 , #2F0AF1); grd.addColorStop(1,#160303); context.fillStyle = grd; context.fillText(내 블로그에 오신 것을 환영합니다!,30,200); context.moveTo(200,280); .스트로크(); context.font=bold 20px Arial = #F80707; context.textAlign=left; context.fillText(지정된 위치, 200,300); context.textAlign=center; context.fillText(지정된 위치, 200,350); .textAlign= right; context.fillText(텍스트는 지정된 위치, 200, 400에서 끝납니다) context.restore(); context.moveTo(10,500); context.lineTo(500,500); context.fillStyle=#F60D0D; context.font=bold 20px Arial; context.textBaseline=top; 10,500); context.textBaseline=하단; context.fillText (지정된 위치는 150,500); context.textBaseline=middle; context.fillText (지정된 위치는 300,500) context.font=bold 40px Arial; #16F643; var text = 내 블로그에 오신 것을 환영합니다! ; context.StrokeText(내 블로그에 오신 것을 환영합니다!,10,600); context.StrokeText(위 문자열의 너비는 +context.measureText(text).width,10,650);
효과는 다음과 같습니다.
기타 속성 및 메서드 그림자 그리기:앞서 그린 오각별에 그림자를 추가해 봅시다
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); //정점의 좌표를 설정하고 정점을 기반으로 경로를 공식화합니다. for (var i = 0; i < 5; i++ ) { context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200, -Math.sin((18+i*72)/180*Math.PI)*200+200) context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+ 200, -Math.sin((54+i*72)/180*Math.PI)*80+200) } context.closePath(); //테두리 스타일 및 채우기 색상을 설정합니다. context.fillStyle = #F6F152; context.shadowColor = #F7F2B4; ShadowOffsetY = 30; context.shadowBlur = 2; context.fill();효과는 다음과 같습니다.
그래픽 조합:globalAlpha: 도면의 현재 알파 또는 투명도 값을 설정하거나 반환합니다.
이 방법은 주로 그래픽의 투명도를 설정하는 방법이므로 여기서는 자세히 소개하지 않습니다.
globalCompositeOperation: 새 이미지가 기존 이미지에 그려지는 방법을 설정하거나 반환합니다. 이 메서드에는 다음 속성 값이 있습니다.
| 값 | 설명하다 |
|---|---|
| 소스 오버 | 대상 이미지 위에 소스 이미지 표시(기본값) |
| 소스 꼭대기 | 대상 이미지 위에 원본 이미지를 표시합니다. 대상 이미지 외부에 있는 원본 이미지 부분은 보이지 않습니다. |
| 소스인 | 대상 이미지 내에 소스 이미지를 표시합니다. 대상 이미지 내의 소스 이미지 부분만 투명하게 표시됩니다. |
| 소스아웃 | 대상 이미지 외에 소스 이미지도 표시합니다. 대상 이미지 외부의 원본 이미지 부분만 표시되며 대상 이미지는 투명합니다. |
| 목적지 이상 | 소스 이미지 위에 대상 이미지 표시 |
| 목적지 꼭대기 | 소스 이미지 위에 대상 이미지를 표시합니다. 원본 이미지 외부에 있는 대상 이미지 부분은 보이지 않습니다. |
| 도착지 | 소스 이미지 내에 대상 이미지를 표시합니다. 원본 이미지 내 대상 이미지의 일부만 표시되며 원본 이미지는 투명합니다. |
| 목적지 | 소스 이미지 외에 대상 이미지도 표시합니다. 원본 이미지 외부의 대상 이미지 부분만 표시되며 원본 이미지는 투명합니다. |
| 거룻배 | 소스 이미지 + 대상 이미지 표시 |
| 복사 | 소스 이미지를 표시합니다. 대상 이미지 무시 |
| xor | XOR 연산을 사용하여 소스 이미지와 대상 이미지 결합 |
클릭 한 번으로 조합을 변경하는 방법에 대한 간단한 예는 다음과 같습니다.
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>그래픽 조합</title> <style type=text/css> #canvas{ border: 1px solid #1C0EFA; : 블록; 여백: 20px 자동; } #버튼{ 너비: 1000px; 여백: 5px 자동; 모두 } 글꼴 크기: 18px: 블록; 왼쪽; 여백-왼쪽: } </style></head><body> <canvas id=canvas width=1000 height=800> 캔버스 </canvas> <div id=buttons> <a href=#>소스 오버</a> <a href=#>소스 꼭대기</a> <a href=#>소스 인</a> <a href=#>소스 아웃</a> <a href=#>대상 오버</a> <a href=#>대상 꼭대기</a> <a href=#>destination-in</a> <a href=#>destination-out</a> <a href=#>가벼움</a> <a href=#>복사</a> <a href=#>xor</a> </div></body><script type=text/javascript>window.onload = function(){ draw(source-over); var 버튼 = document.getElementById(buttons). getElementsByTagName(a); for (var i = 0; i <button.length; i++) {button[i].onclick = function(){ draw(this.text); }}; function draw(compositeStyle){ var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.clearRect(0, 0, canvas.width, canvas.height); context.font = 굵은 40px Arial; context.textAlign = center; context.textBasedline = middle; context.fillText(globalCompositeOperation = +compositeStyle, canvas.width/2, 60); //직사각형 그리기 context.fillStyle = #F6082A; context.fillRect(300, 150, 500, 500); //삼각형 컨텍스트 그리기 globalCompositeOperation = 합성스타일; context.fillStyle = #1611F5; context.beginPath(); context.lineTo(1000,750); context.closePath(); </html>독자는 라벨을 클릭하여 다양한 조합 효과를 관찰할 수 있습니다.
클리핑 영역:Clip() 메서드는 원본 캔버스에서 모든 모양과 크기를 잘라냅니다.
팁: 영역을 클리핑하면 이후의 모든 그리기는 클리핑된 영역으로 제한됩니다(캔버스의 다른 영역에는 액세스할 수 없음). 또한 clips() 메서드를 사용하기 전에 save() 메서드를 사용하여 현재 캔버스 영역을 저장하고 나중에 언제든지 (restore() 메서드를 통해) 복원할 수 있습니다.
다음은 원을 사용하여 직사각형을 가로채는 예입니다.
var canvas = document.getElementById(canvas); var context = canvas.getContext(2d); context.beginPath(); context.fillRect(0,0,canvas.width,canvas.height); context.beginPath(); context.fillStyle = #FFFDFD; context.arc(400,400,100,0,2*Math.PI); context.clip(); context.fillStyle = #F60825; 50);
위의 속성과 메소드 외에도 다음과 같은 메소드가 있습니다.
drawImage(): 캔버스에 이미지, 캔버스 또는 비디오를 그립니다.
toDataURL(): 그래픽 저장
isPointInPath(): 지정된 지점이 현재 경로에 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
여기서는 하나씩 예를 들어 설명하지 않겠습니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.