시작하기 전에 캔버스가 이미지를 그리는 방법을 알아야 합니다. 캔버스 요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다. HTML5 캔버스 요소는 JavaScript를 사용하여 웹 페이지에 2D 이미지를 그립니다. 직사각형 영역의 캔버스에서 각 픽셀을 제어하고 JavaScript를 사용하여 2D 그래픽을 그리고 픽셀 단위로 렌더링합니다. 캔버스 요소를 사용하여 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 방법은 다양합니다.
* 알아채다! ! ! 캔버스 태그 자체에는 그리기 기능이 없으며 JavaScript를 사용하여 웹 페이지에 이미지를 그릴 수만 있습니다.
렌더링은 다음과 같습니다.
1. JS 코드 초기화
//초기화(function(){ var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mH; canvas.width = mW; mCtx = canvas.getContext('2d' ); drawPolygon(mCtx); // 다각형 가장자리 그리기 drawLines(mCtx); //정점선 drawText(mCtx); 텍스트 그리기 drawRegion(mCtx); // 데이터 그리기 drawCircle(mCtx); // 데이터 점 그리기})();위 코드에서는 즉시 실행 함수를 통해 모든 설정이 초기화됩니다. 캔버스에 정육각형을 그리는 방법은 캔버스에 정육각형 그리기를 참고하세요.
스파이더 다이어그램에서는 이를 분할하여 육각형, 직선, 원을 완전한 개별 구성 요소로 그린 다음 메소드를 통해 균일하게 호출하고 그릴 수 있습니다.
소스 코드는 아래와 같습니다:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>스파이더 차트 캔버스</title> <style type=text/css> 캔버스{ } </style></head ><body><script type=text/javascript> var mW = 400; var mH = 400; var mData = [['마나', 77],['방어', 72],['Health', 46],['Physical Damage', 50],['Recovery value', 80],['Endurance', 60]]; var mCount = mData.length; var mCenter = mW /2; //중심점 var mRadius = mCenter - 100; //Radius(감산된 값은 그려진 텍스트를 위한 공간을 남기는 데 사용됩니다.) var mAngle = Math.PI * 2 / mCount; //각도 var mCtx = null; var mColorPolygon = '#B8B8B8'; //폴리곤 색상 var mColorLines = '#B8B8B8'; //정점 연결 색상 var mColorText = '#000000'; { var canvas = document.createElement('canvas'); document.body.appendChild(canvas); canvas.height = mCtx = canvas.getContext('2d'); drawLines(mCtx); drawRegion(mCtx); (); // 다각형 가장자리 그리기 function drawPolygon(ctx){ ctx.save(); // 기본 상태 저장 ctx.StrokeStyle = mColorPolygon; var r = mRadius/ mCount; //단위 반경//6개의 원 그리기 for(var i = 0; i < mCount; i ++) ctx.beginPath(); //시작 경로 var currR = r * ( i + 1); //현재 반경 //6개의 모서리 그리기 for(var j = 0; j < mCount; j ++) { var x = mCenter + currR * Math.cos(mAngle * j); var y = mCenter + currR * Math.sin(mAngle * j) console.log('x:' + x, 'y :' + y); ctx.lineTo(x, y); } ctx.closePath(); //닫힌 경로 ctx.strok(); ctx.restore(); // 기본 상태로 복원 } //Vertex 연결 함수 drawLines(ctx){ ctx.beginPath() = mColorLines; < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); mRadius * Math.sin(mAngle * i); ctx.moveTo(mCenter, mCenter) ctx.lineTo(x, y); } ctx.restore() } //텍스트 그리기 ctx){ ctx.save(); var 글꼴 크기 = mCenter / 12; Microsoft Yahei'; ctx.fillStyle = mColorText; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i); .sin(mAngle * i); if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){ ctx.fillText(mData[i][0], x, y +fontSize) }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){ ctx.fillText(mData[i ][0], x - ctx.measureText(mData[i][0]).width, y + 글꼴 크기) }else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){ ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]) .width, y); }else{ ctx.fillText(mData[i][0], x, y) } ctx.restore(); } //데이터 영역 그리기 function drawRegion(ctx){ ctx.save(); ctx.beginPath(); for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos (mAngle * i) * mData[i][1] / 100; var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.lineTo(x, y) } ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; ctx.restore(); } //점 그리기 함수 drawCircle(ctx){ ctx.save(); / 18; for(var i = 0; i < mCount; i ++){ var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100; mRadius * Math.sin(mAngle * i) * mData[i][1] / 100; ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = 'rgba(255, 0, 0, 0.8)' } ctx.restore(); </script></body></html>위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.