Canvas는 HTML5의 일부이며 스크립팅 언어가 이미지를 동적으로 렌더링할 수 있도록 해줍니다. 캔버스는 영역을 정의합니다. 영역의 너비와 높이는 HTML 속성으로 정의할 수 있습니다. JavaScript 코드는 전체 그리기 기능(API) 세트를 통해 영역에 액세스하고 웹 페이지에 동적 렌더링을 렌더링할 수 있습니다.
2. 캔버스가 할 수 있는 일게임: 게임이 HTML5 분야에서 중요한 역할을 한다는 것은 의심의 여지가 없습니다. HTML5는 웹 기반 이미지 표시 측면에서 Flash보다 더 입체적이고 정교합니다.
차트 제작 : 차트 제작을 사람들이 무시하는 경우가 많지만, 기업 내, 기업 간의 소통과 협력은 차트와 떼려야 뗄 수 없는 관계입니다. 일부 개발자는 이제 HTML/CSS를 사용하여 아이콘을 만듭니다. 물론 SVG(Scalable Vector Graphics)를 사용하여 차트 제작을 완성하는 것도 매우 좋은 방법입니다.
글꼴 디자인: 글꼴의 사용자 정의 렌더링은 완전히 웹 기반이며 HTML5 기술을 사용하여 구현됩니다.
그래픽 편집기: 그래픽 편집기는 100% 웹 기반일 수 있습니다.
그래픽, 오디오, 비디오 및 기타 여러 요소와 같이 웹 사이트에 삽입할 수 있는 기타 콘텐츠는 웹과 더 잘 통합될 수 있으며 플러그인이 필요하지 않습니다.
3. Canvas 기본 사용법1. <canvas>를 사용할 때 먼저 너비와 높이 속성을 설정하고 그릴 수 있는 영역의 크기를 지정해야 합니다. 스타일을 추가하거나 이미지를 그리지 않고 너비와 높이만 지정하면 해당 요소가 페이지에 표시되지 않습니다. .
<canvas id='draw' width='200px' height='200px'></canvas>
2. 이미지를 그리려면 먼저 캔버스를 가져와 getContext() 메서드를 호출한 다음 컨텍스트 이름(2D/3D)을 전달해야 합니다. 2D에는 두 가지 기본 그리기 작업이 있습니다. 채우기(fillStyle) | ) | 이 두 속성의 기본값은 #000입니다.
var draw = document.getElementById('draw'); //브라우저가 <canvas> 요소를 지원하는지 확인합니다. if(draw.getContext){ var context = draw.getContext('2d'); the context context.StrokeStyle = '#f00'; //채워진 초원의 색상 context.fillStyle = '#0f0';}3. toDataURL() 메소드를 사용하여 <canvas> 요소에 그려진 이미지를 내보냅니다.
var draw = document.getElementById('draw');if(draw.getContext){ //이미지 표시, toDataURL()은 base64 문자열을 가져옵니다. var drawURL = draw.toDataURL('image/png') var image; = document.createElement('img'); image.src = drawURL;4. 직사각형을 그리는 데는 세 가지 주요 방법이 있습니다. fillRect()는 직사각형의 채우기 색상이고, 스트로크Rect()는 직사각형의 획이며, clearRect()는 직사각형을 지웁니다. 이 세 가지 메소드는 모두 4개의 매개변수 x/y/w/h, 직사각형의 왼쪽 상단 모서리 좌표, 너비 및 높이를 받습니다.
var draw = document.getElementById('draw'); //브라우저가 <canvas> 요소를 지원하는지 확인합니다. if(draw.getContext){ var context = draw.getContext('2d'); //빨간색 사각형을 그리고 녹색 외곽선 Edge context.fillStyle = '#f00'; context.StrokeStyle = '#0f0'; context.fillRect(10,10,50,50); //빨간색 선으로 녹색 직사각형을 그립니다. context.fillStyle = '#0f0'; context.StrokeStyle = '#f00'; , 50); context.fillRect(10,10,50,50); //두 직사각형이 겹치는 작은 직사각형을 지웁니다. context.clearRect(40,40,10,10);}5. 경로 그리기 경로를 그리려면 먼저 BeginPath() 메서드를 호출한 후 다음 메서드를 사용하여 실제로 경로를 그립니다.
arc(x,y,반지름,startAngle,endAngle,반시계방향)
(x, y) 원 중심 좌표, 반경, (startAngle, endAngle) 시작 각도 및 끝 각도, 반시계 방향 시계 방향(false)/반시계 방향(true)
moveTo(x,y)는 선을 그리지 않고 커서를 (x,y)로 이동합니다. 소위 이전 점 좌표를 수정하는 데 사용할 수 있습니다*
호까지(x1,y1,x2,y2,반지름)
이전 점에서 시작하여 (x2, y2)까지, 주어진 반지름으로 (x1, y1)을 통과하는 곡선을 그립니다.
lineTo(x,y)는 이전 점에서 (x,y)까지 직선을 그립니다.
직사각형(x,y,너비,높이)
(x, y)에서 시작하여 너비와 높이가 너비와 높이인 직사각형을 그립니다. 이 메서드는 스트로크Rect() 및 fillRect()에 의해 그려진 독립적인 모양 대신 직사각형 경로를 그립니다.
//다음으로 숫자 없이 시계를 그립니다. var draw = document.getElementById('draw');if(draw.getContext){ var context = draw.getContext('2d'); //시작 경로 context.beginPath( ) / /바깥쪽 원 그리기 context.arc(100,100,99,0,2*Math.PI,false); //내부 원 그리기 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false) //분침 그리기 context.moveTo(100,100); ,15) ; //시침 그리기 context.moveTo(100,100) context.lineTo(35,100); //스트로크 경로 context.Stroke(); context.StrokeStyle = '#f00' }6. 텍스트를 그리는 데는 두 가지 주요 메서드인 fillText()와 스트로크텍스트()가 있으며, 둘 다 |text(그려질 텍스트)|x|y|최대 픽셀 너비(선택 사항)|라는 4개의 매개 변수를 받습니다. 다음 세 가지 속성을 기반으로
글꼴 텍스트 스타일, 크기, 글꼴 등
textAlign 텍스트 정렬 |start|end|left|right|center|
textBaseline 텍스트|상단|매달려|중간|알파벳|표의문자|하단|
//다이얼에 12시 방향 그리기 context.font = 'bold 12px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle';
7. 변신
회전(천사)은 원점을 중심으로 이미지 각도 라디안을 회전합니다.
scale(scaleX,scaleY)는 이미지의 크기를 조정합니다. x*scaleX,y*scaleY의 기본값은 1입니다.
translate(x,y)는 좌표 원점을 (x,y)로 이동합니다.
var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); //시작 경로 context.beginPath(); //외부 원 그리기 100,100,99,0,2*Math.PI,false); //내부 원 그리기 context.moveTo(194,100); context.arc(100,100,94,0,2*Math.PI,false); //원점 변환 context.translate(100,100); //손을 회전 context.rotate(1) //분침 컨텍스트를 그립니다. moveTo(0, 0); context.lineTo(0,-85); //시침 그리기 context.moveTo(0,0); //스트로크 경로 context.Stroke(); context.StrokeStyle = '#f00' }8. 이미지 그리기, drawImage()
var img = document.getElementByTagNames('image')[0]; context.drawImage(img,0,10,50,50,0,100,40,60);9개의 매개변수: 그려질 이미지, 원본 이미지 |x|y|w|h|, 대상 이미지 |x|y|w|h|
9. 그림자와 그라데이션
Shadow에는 주로 다음과 같은 속성 값이 있습니다.
var context = draw.getContext('2d'); //그림자 설정 context.shadowColor = 'rgba(210,210,210,.5)'; context.shadowOffersetX = '5'; 4개의 매개변수 |x1|y1|x2|y2|는 시작점의 좌표와 끝점의 좌표입니다. vargradient = context.createLinearGradient(30,30,70,70);gradient.addColorStop(0,'#fff'); //0은 시작을 의미합니다.gradient.addColorStop(1,'#000') //1은 끝을 의미합니다//사용 정의된 그래디언트 속성 context.fillStyle =gradient; //채울 때 그래디언트를 넣습니다. context.fillRect(30,30,50,50);방사형 그래디언트 createRadialGradient()를 생성합니다. 6개의 매개변수 |x1|y2|radius1|x2|y2|radius2|는 각각 첫 번째 원 중심과 반경이고 두 번째 원 중심과 반경입니다. 사용법은 선형 그래디언트와 동일합니다.
10. 이미지 데이터를 이용하면, getImageData()를 통해 원본 이미지 데이터를 얻을 수 있습니다. 4개의 매개변수 |x|y|w|h|. 각 ImageData 객체에는 너비/높이/데이터의 세 가지 속성이 있습니다. 데이터는 각 픽셀의 데이터를 내부적으로 저장하는 배열입니다. 각 요소의 값은 0-255입니다.
var imgdata = context.getImageData(0,0,100,100); var data = imgdata.data, red = data[0], green = data[1], blue = data[2], alpha = data[3]; 회색 필터 var draw = document.getElementById('draw'); if(draw.getContext){ var context = draw.getContext('2d'); = document.getElementsByTagName('image')[0], imageData,data, i,len,average, red,green,blue,alpha; //원본 이미지 그리기 context.drawImage(img,0,0,100,100) // 이미지 데이터 가져오기 imageData = context.getImageData(0,0,img.width,img.height) data = imageData.data; for(i=0,len=data.length;i<len;i+=4){ 빨간색 = 데이터[i]; 녹색 = 데이터[i+1]; 파란색 = 데이터[i+2]; i+3]; //rgb 평균 계산 = Math.floor((red+green+blue)/3) //색상 값 설정 data[i] =average; ; 데이터[i+2] = 평균 } imageData.data = data; //캔버스에 데이터를 그립니다. context.putImageData(imageData,0,0)}위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.