English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

내장 SVG5 기본 튜토리얼

내장 SVG5 API

내장 SVG5 미디어

내장 SVG5 그래픽

내장 SVG5 Canvas

캔버스는 HTML5 스크립트(대개 자바스크립트)를 사용하여 그림을 그릴 수 있는 새로운 HTML 요소입니다. 이를 통해 사진집을 만들거나 간단한(그렇지 않아도 어려운) 애니메이션을 만들 수 있으며, 실시간 비디오 처리와 렌더링도 할 수 있습니다.

<canvas> 태그는 그래픽, 예를 들어 차트와 다른 이미지를 정의합니다. 그래픽을 그리기 위해 스크립트(대개 자바스크립트)를 사용해야 합니다.

캔버스에(캔버스) 빨간 사각형, 변화하는 사각형,彩色 사각형, 그리고 일부 색상의 글자를 그려야 합니다.

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

canvas는 무엇인가요?

내장 SVG5 <canvas> 요소는 그래픽을 그리기 위해 사용되며, 스크립트(대부분 JavaScript)를 통해 완료됩니다.

<canvas> 태그는 단순한 그림 상자일 뿐, 그래픽을 그리기 위해 스크립트(대부분 JavaScript)를 사용해야 합니다.

canvas를 사용하여 경로, 상자, 원, 문자 및 이미지를 그릴 수 있는 여러 가지 방법이 있습니다.

브라우저 지원

표에서의 숫자는 <canvas> 요소를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

요소




설명4.09.02.03.19.0

캔버스(Canvas)를 생성하다

캔버스는 웹 페이지에서 직사각형 상자로, <canvas> 요소를 통해 그립니다.

주의: 기본적으로 <canvas> 요소는 테두리와 내용이 없습니다.

<canvas> 간단한 예제:

<canvas id="myCanvas" width="200" height="100"></canvas>

주의: 태그는 일반적으로 id 속성을 지정해야 합니다 (스크립트에서 자주 참조됨), width와 height 속성은 캔버스의 크기를 정의합니다.

알림:HTML 페이지에서 여러 개의 <canvas> 요소를 사용할 수 있습니다.

style 속성을 사용하여 테두리를 추가합니다:

<!DOCTYPE　html><html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼 웹(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
body>/canvas>
body>/script>
body>/<
html>/테스트해 보세요 ‹

JavaScript를 사용하여 이미지를 그립니다

canvas 요소 자체는 그리기 능력이 없습니다. 모든 그리기 작업은 JavaScript 내부에서 완료되어야 합니다：

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #c3c3c3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.
body>/canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75,
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

예제 해석:

먼저, <canvas> 요소를 찾습니다:

var c=document.getElementById("myCanvas");

그런 다음, context 객체를 생성합니다：

var ctx=c.getContext("2d);

getContext("2d") 객체는 내장된 HTML5 객체는 다양한 그리기 경로, 직사각형, 원, 문자 및 이미지 추가 메서드를 가진 것입니다.

아래 두 줄 코드는 빨간색 직사각형을 그립니다：

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75,

fillStyle 속성을 설정할 수 있는 것은 CSS 색상, 그레이딩, 또는 패턴입니다. fillStyle 기본 설정은 #000000(검은색)입니다.

fillRect(x,y,width,height) 메서드는 현재 직사각형의 채우기 방식을 정의합니다.

Canvas 좌표

canvas는 두차원 그리드입니다.

canvas의 왼쪽 상단 좌표는 (0,0)입니다

上面的 fillRect 메서드는 매개변수 (0,0,150,75)

의미는: 캔버스에 그립니다 150x75 의 사각형, 왼쪽 상단에서 시작 (0,0)。

좌표 예제

아래 그림과 같이, 캔버스의 X와 Y 좌표는 캔버스에서 그리기를 정위치하는 데 사용됩니다. 마우스를 이동할 때, 정위치 좌표가 표시되는 사각형 상자가 나타납니다.

X
Y

Canvas - 경로

canvas에 선을 그리기 위해 다음 두 가지 메서드를 사용합니다:

  • moveTo(x,y)을 정의합니다 선의 시작 좌표

  • lineTo(x,y)를 정의합니다

선을 그리기 위해 "ink" 메서드를 사용해야 합니다. 예를 들어, stroke().

예제

시작 좌표(0,0), 종료 좌표 (200,100)。그런 다음 stroke() 메서드를 사용하여 선을 그립니다:

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

canvas에서 원을 그리기 위해 다음 메서드를 사용합니다:

arc(x,y,r,start,stop)

실제로 원을 그리는 데 "ink" 메서드를 사용하고 있습니다. 예를 들어, stroke() 또는 fill().

예제

arc() 메서드를 사용하여 원을 그립니다:

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
body>/}　
body>/script>
body>/<
html>/테스트해 보세요 ‹

Canvas - 텍스트

canvas에서 텍스트를 그리는 데 중요한 속성과 메서드는 다음과 같습니다:

  • font - 글꼴 정의

  • fillText(text,x,y) - canvas에 실心的 텍스트를 그립니다

  • strokeText(text,x,y) - canvas에 투명한 텍스트를 그립니다

use "fillText()":

예제

"Arial" 폰트로 캔버스에 높이 30px의 글자(실心的):

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.font="30px　Arial";
ctx.fillText("Hello　World",10,50);
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

use "strokeText()":

예제

"Arial" 폰트로 캔버스에 높이 30px의 글자(투명한):

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
ctx.font="30px　Arial";
ctx.strokeText("Hello　World",10,50);
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

Canvas - 　그레이더

그레이더는 사각형, 원형, 선, 텍스트 등 다양한 형태에 채울 수 있으며, 각 형태는 다른 색상을 정의할 수 있습니다.

Canvas 그레이더를 설정하는 방법은 두 가지가 있습니다:

  • createLinearGradient(x,y,x1,y1) - 선형 그레이더를 생성합니다

  • createRadialGradient(x,y,r,x1,y1,r1) - 계산하다 createRadialGradient():/원형 그레이더

渐变객체를 사용할 때는 두 가지 또는 그 이상의 중지색을 사용해야 합니다.

addColorStop() 메서드를 사용하여 색상 정지를 지정하다. 매개변수는 좌표를 사용하여 설명할 수 있으며, 0에서1.

그레이드렌트를 사용하여, fillStyle 또는 strokeStyle의 값을 설정하다. 그레이드렌트를 사용하여, 다음으로 형태를 그려요, 직사각형, 텍스트, 또는 선.

계산하다 createLinearGradient():

예제

직사각형을 그레이드렌트로 채우기:

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
//　gradient을 생성하다
계산하다 createLinearGradient():2var grd = ctx.createLinearGradient(0,0,
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　gradient으로 채우기
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

00,0);

예제

계산하다 createRadialGradient():/원형 그레이드렌트. 직사각형을 그레이드렌트로 채우기:

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<canvas id="myCanvas" width="200" height="10" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
//　gradient을 생성하다
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//　gradient으로 채우기
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

Canvas - 그림

그림을 캔버스에 배치하려면 다음 메서드를 사용하세요:

  • drawImage(image, x, y)

사용할 그림:

예제

그림을 캔버스에 배치하려면:

당신의 브라우저는 HTML을 지원하지 않습니다5 의 <canvas> 요소.

JavaScript:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 강의(oldtoolbag.com)</title>　
body>/head>
<body>
<p>사용할 이미지:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="3" style="border:1px solid #d3d3d3>
당신의 브라우저는 HTML을 지원하지 않습니다5　canvas 태그.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d);
var img = document.getElementById("scream");
img.onload = function() {
　　　　ctx.drawImage(img,10,10,
);　
body>/}
body>/script>
body>/<
html>/테스트해 보세요 ‹

›

HTML Canvas 참조 설명서태그의 모든 속성은 다음을 참조하세요

Canvas 참조 설명서.

HTML <canvas> 태그태그
설명내장 SVG5 <canvas>
내장 SVG5 의 canvas 요소는 JavaScript를 사용하여 웹 페이지에서 이미지를 그립니다.내장 SVG5 HTML