简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  HTML5 캔버스 그리기 - 캔버스를 사용하여 그래픽 및 텍스트 튜토리얼 그리기 html5 캔버스를 사용하여 아름다운 그림 그리기_html5 튜토리얼 기술

HTML5 캔버스 그리기 - 캔버스를 사용하여 그래픽 및 텍스트 튜토리얼 그리기 html5 캔버스를 사용하여 아름다운 그림 그리기_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:46:301701검색

HTML5가 인기가 많네요. 최근 HTML 관련 기능을 활용해보고 싶은 생각이 있어서 잘 배워봐야겠네요.

Canvas의 기능을 잘 살펴본 후 HTML5가 클라이언트 측 상호 작용에서 점점 더 기능적이 되고 있다는 것을 느꼈습니다. 오늘은 Canvas 그리기에 대해 살펴보았습니다. 사용.

1. 캔버스를 사용하여 직선을 그립니다.



XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.moveTo(20,30);//第一个起点   
  17.             cans.lineTo(120,90);//第二个点   
  18.             cans.lineTo(220,60);//第三个点（以第二个点为起点）   
  19.             cans.lineWidth=3;   
  20.             cans.StrokeStyle = '빨간색';   
  21.             cans.Stroke();   
  22.         }
  23.  스크립트> 
  24.  <본체 온로드="pageLoad( );">
  25.  <캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
  26.  몸> 
  27. html>

여기에서 사용된 두 가지 API 메소드인 moveTo와 lineTo는 각각 선분의 시작점과 끝점 좌표이며, 변수는 각각 (X 좌표, Y 좌표), 스트로크 스타일 및 스트로크 경로 그리기 스타일 및 그리기 경로입니다.

2. 그라데이션 선 그리기

그라디언트 선은 색상에 그라데이션 효과를 줍니다. 물론 그라데이션 스타일은 경로 방향을 따를 수도 있고 그렇지 않을 수도 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.moveTo(0,0);   
  17.             cans.lineTo(400,300);   
  18.             var gnt1 = 캔.createLinearGradient(0,0,400,300);//线性渐变的起止坐标   
  19.             gnt1.addColorStop(0,'red');//创建渐变的开始颜color，0表示偏移weight，个人理解为直线上的对位置，最大为1，一个渐变中可以写任의미个渐变颜color   
  20.             gnt1.addColorStop(1,'yellow');   
  21.             cans.lineWidth=3;   
  22.             cans.StrokeStyle = gnt1;   
  23.             cans.Stroke();   
  24.         }
  25.  스크립트> 
  26.  <본체 온로드="pageLoad( );">
  27.  <캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
  28.  몸> 
  29. html>

3. 직사각형이나 정사각형 그리기:

HTML4를 사용하면 이런 직사각형 프레임은 배경 코드를 통해서만 생성할 수 있습니다. 이제 HTML5에서 제공하는 Canvas 기능을 쉽게 그릴 수 있으므로 HTML5의 장점은 상당히 높습니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.fillStyle = '노란색';   
  17.             cans.fillRect(30,30,340,240);   
  18.         }   
  19.     스크립트>  
  20.     <본문 온로드="pageLoad( );">  
  21.         <캔버스 id="can"  너비="400px" 높이="300px">4캔버스>   
  22.     본문>  
  23. html>  

여기에서는 fillRect() 메소드가 사용됩니다. 문자 그대로 보면 이것이 직사각형을 채우는 것임을 알 수 있습니다. 여기서 매개변수는 설명할 가치가 없습니다. 수학의 좌표와 동일합니다. 자세한 내용은

을 참조하세요.

여기서 X와 Y는 캔버스의 왼쪽 상단을 기준으로 시작점에서 시작됩니다. 기억하세요! !

4. 간단한 직사각형 상자를 그립니다

위의 예에서는 직사각형 블록을 그리고 색상을 채우는 것에 대해 설명합니다. 이 예에서는 채우기 효과를 구현하지 않고 단순히 직사각형을 그립니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.StrokeStyle = '빨간색';   
  17.             cans.StrokeRect(30,30,340,240);   
  18.         }   
  19.     스크립트>  
  20.     <본문 온로드="pageLoad( );">  
  21.         <캔버스 id="can"  너비="400px" 높이="300px">4캔버스>   
  22.     본문>  
  23. html>  
  24.   

위의 예와 마찬가지로 채우기를 획으로 바꾸는 것은 매우 간단합니다. 자세한 내용은 위의 예를 참조하세요.

5. 선형 그래디언트로 직사각형을 그립니다

그라디언트는 채우기의 꽤 좋은 효과입니다. 예 2와 예 3을 결합하면 그라데이션 직사각형을 만들 수 있습니다

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             var gnt1 = 캔.createLinearGradient(10,0,390,0);   
  17.             gnt1.addColorStop(0,'red');   
  18.             gnt1.addColorStop(0.5,'green');   
  19.             gnt1.addColorStop(1,'blue');   
  20.             cans.fillStyle = gnt1;   
  21.             cans.fillRect(10,10,380,280);   
  22.         }
  23.  스크립트> 
  24.  <본체 온로드="pageLoad( );">
  25.  <캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
  26.  몸> 
  27. html>

설명할 필요 없이 fillRect(X,Y,Width,Height)만 기억하세요.

6. 원을 채우세요


타원형을 비롯한 원형 모양이 널리 사용됩니다.

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,true);   
  18.             cans.closePath();   
  19.             cans.fillStyle = '녹색';//本来这里最初使사용용是red，截图一看，傻眼了，怕上街被爱國者打啊，其实你懂的~~   
  20.             cans.fill();   
  21.         }
  22.  스크립트> 
  23.  <본체 온로드="pageLoad( );">
  24.  <캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
  25.  몸> 
  26. html>

여기서 호 방법의 사용법은 arc(X,Y,Radius,startAngle,endAngle,anticlockwise)입니다. 이는 (원 중심의 X 좌표, 원 중심의 Y 좌표, 반경, 시작 각도(라디안), 끝 각도를 의미합니다. 라디안, 시계 방향 그리기 여부)

원호의 매개변수 비교:

a.cans.arc(200,150,100,0,Math.PI,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

c, cans.arc(200,150,100,0,Math.PI/2,true);

d, cans.arc(200,150,100,0,Math.PI/2,false);

7. 원형블록

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             cans.beginPath();   
  17.             cans.arc(200,150,100,0,Math.PI*2,false);   
  18.             cans.closePath();   
  19.             cans.lineWidth = 5;   
  20.             cans.StrokeStyle = '빨간색';   
  21.             cans.Stroke();   
  22.         }
  23.  스크립트> 
  24.  <본체 온로드="pageLoad( );">
  25.  <캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
  26.  몸> 
  27. html>

여기에서는 설명하지 않겠습니다. 위의 예와 마찬가지로 lineWidth는 선의 너비를 제어합니다.

8. 원형 그라데이션

XML/HTML 코드클립보드에 콘텐츠 복사
  1. >  
  2. <html>  
  3.     <머리>  
  4.         <메타 문자 집합="UTF- 8">  
  5.     머리>  
  6.     <스타일 유형="text/ css">  
  7.         캔버스{테두리:점선 2px #CCC}   
  8.     스타일>  
  9.     <스크립트 유형="text/ javascript">  
  10.         함수 $$(id){   
  11.             return document.getElementById(id);   
  12.         }   
  13.         함수 pageLoad(){   
  14.             var 할 수 있습니다 = $$('할 수 있습니다');   
  15.             var 할 수 있습니다캔 = can.getContext('2d');   
  16.             var gnt = 캔.createRadialGradient(200,300,50,200,200,200);   
  17.             gnt.addColorStop(1,'red');   
  18.             gnt.addColorStop(0,'green');   
  19.             cans.fillStyle = gnt;   
  20.             cans.fillRect(0,0,800,600);   
  21.         }
  22.  스크립트> 
  23.  <본체 온로드="pageLoad( );">
  24.  <캔버스 id="can" 너비="800px" 높이="600px">4캔버스>
  25.  몸> 
  26. html>

여기서 설명해야 할 것은 createRadialGradient 메소드입니다. 매개변수는 (Xstart, Ystart, radiusStart, XEnd, YEnd, radiusEnd)입니다. 즉, 그래디언트를 구현할 때 두 개의 원을 사용합니다. 원래 원과 다른 하나는 그라데이션 원입니다. 실제로 이 좌표 및 반경 제어 방법을 사용하면

과 같은 다양한 스타일을 얻을 수 있습니다.

3차원 원

XML/HTML 코드클립보드에 콘텐츠 복사
  1. var gnt = 캔.createRadialGradient(200,150,0,200,50,250)
  2. gnt.addColorStop(0,'red')
  3. gnt.addColorStop(1,'#333')
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：html5 DeviceOrientation_html5 튜토리얼 기술을 기반으로 WeChat 흔들기 기능 구현다음 기사：html5 DeviceOrientation_html5 튜토리얼 기술을 기반으로 WeChat 흔들기 기능 구현

관련 기사

더보기