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

집

웹 프론트엔드

H5 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:46 PM

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차원 원

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

var gnt = 캔.createRadialGradient(200,150,0,200,50,250)
gnt.addColorStop(0,'red')
gnt.addColorStop(1,'#333')

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7338

자바 튜토리얼

1627

Cakephp 튜토리얼

1352

라라벨 튜토리얼

1265

PHP 튜토리얼

1210

Related knowledge

내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까? Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까? Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까? Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까? Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까? Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까? Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI