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

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.moveTo(20,30);//第一个起点
cans.lineTo(120,90);//第二个点
cans.lineTo(220,60);//第三个点（以第二个点为起点）
cans.lineWidth=3;
cans.StrokeStyle = '빨간색';
cans.Stroke();
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
몸>
html>

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

2. 그라데이션 선 그리기

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.moveTo(0,0);
cans.lineTo(400,300);
var gnt1 = 캔.createLinearGradient(0,0,400,300);//线性渐变的起止坐标
gnt1.addColorStop(0,'red');//创建渐变的开始颜color，0表示偏移weight，个人理解为直线上的对位置，最大为1，一个渐变中可以写任의미个渐变颜color
gnt1.addColorStop(1,'yellow');
cans.lineWidth=3;
cans.StrokeStyle = gnt1;
cans.Stroke();
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
몸>
html>

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.fillStyle = '노란색';
cans.fillRect(30,30,340,240);
}
스크립트>
<본문 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
본문>
html>

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

을 참조하세요.

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.StrokeStyle = '빨간색';
cans.StrokeRect(30,30,340,240);
}
스크립트>
<본문 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
본문>
html>

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

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

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
var gnt1 = 캔.createLinearGradient(10,0,390,0);
gnt1.addColorStop(0,'red');
gnt1.addColorStop(0.5,'green');
gnt1.addColorStop(1,'blue');
cans.fillStyle = gnt1;
cans.fillRect(10,10,380,280);
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
몸>
html>

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

6. 원을 채우세요

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

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,true);
cans.closePath();
cans.fillStyle = '녹색';//本来这里最初使사용용是red，截图一看，傻眼了，怕上街被爱國者打啊，其实你懂的~~
cans.fill();
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
몸>
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);

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

7. 원형블록

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
cans.beginPath();
cans.arc(200,150,100,0,Math.PI*2,false);
cans.closePath();
cans.lineWidth = 5;
cans.StrokeStyle = '빨간색';
cans.Stroke();
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="400px" 높이="300px">4캔버스>
몸>
html>

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

8. 원형 그라데이션

XML/HTML 코드클립보드에 콘텐츠 복사

>
<html>
<머리>
<메타 문자 집합="UTF- 8">
머리>
<스타일 유형="text/ css">
캔버스{테두리:점선 2px #CCC}
스타일>
<스크립트 유형="text/ javascript">
함수 $$(id){
return document.getElementById(id);
}
함수 pageLoad(){
var 할 수 있습니다 = $$('할 수 있습니다');
var 할 수 있습니다캔 = can.getContext('2d');
var gnt = 캔.createRadialGradient(200,300,50,200,200,200);
gnt.addColorStop(1,'red');
gnt.addColorStop(0,'green');
cans.fillStyle = gnt;
cans.fillRect(0,0,800,600);
}
스크립트>
<본체 온로드="pageLoad( );">
<캔버스 id="can" 너비="800px" 높이="600px">4캔버스>
몸>
html>

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

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

3차원 원