HTML 캔버스-HTML 튜토리얼-php.cn

HTML 캔버스란 무엇인가요?

HTML 캔버스 드로잉 예시

1. 페이지에 선 그리기

2. HTML 캔버스에 원 그리기

3. HTML 캔버스에 텍스트 그리기

4. HTML 캔버스 안에 호 그리기

5. 선형 또는 원형 색상 그라데이션 그리기

결론

집

웹 프론트엔드

HTML 튜토리얼

HTML 캔버스

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:39 PM

html html5 HTML Tutorial HTML Properties HTML tags

이 기사에서는 HTML Canvas에 대한 개요를 볼 것입니다. 이미 알고 있듯이 HTML은 마크업 언어입니다. 방문자에게 정보를 제공하려면 디스플레이에 표시할 텍스트와 표시 방법(예: 글꼴 크기, 색상, 방향 등)을 사용하여 HTML을 작성할 수 있습니다. 페이지에 시각적 개체를 추가하려면 링크를 연결해야 합니다. 호스트의 HTML 파일과 별도로 저장되는 이미지를 페이지에 삽입합니다.

하지만 페이지에 무언가를 그려야 한다면 어떻게 해야 할까요?

HTML 캔버스란 무엇인가요?

HTML 캔버스(

구문:

<canvas id="example" width="200" height="200">
<em>Content here</em>
</canvas>

로그인 후 복사

너비 및 높이 속성을 통해 캔버스 크기를 정의할 수 있습니다. 요소 ID는 태그에 정의될 수도 있으며, 이를 통해 캔버스 요소에서 CSS 스타일을 사용할 수 있습니다. 다음은 Canvas 요소를 사용하여 직사각형을 그리는 방법에 대한 예입니다.

코드:

<html>
<head>
<style>
#examplecanvas{border:2px solid green;}
</style>
</head>
<body>
<canvas id = "examplecanvas" width = "500" height = "300"></canvas>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

HTML 캔버스 드로잉 예시

캔버스 요소를 사용하여 직사각형을 그리는 방법을 살펴보았으니 이제 브라우저 출력 화면에서 이 요소를 사용하여 그릴 수 있는 다른 개체를 살펴보겠습니다.

1. 페이지에 선 그리기

moveTo(), 스트로크() 및 lineTo()는 웹페이지에 직선을 그리는 데 사용할 수 있는 메서드입니다. 짐작할 수 있듯이 moveTo()는 요소 공간에 커서의 위치를 알려주고, lineTo()는 선의 끝점을 알려주는 메서드입니다. 스트로크()는 선을 보이게 합니다. 참조용 코드는 다음과 같습니다.

코드:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Canvas Line Example</title>
<style>
canvas {
border: 2px solid black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.moveTo(10, 150);
context.lineTo(350, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="400" height="300"></canvas>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

2. HTML 캔버스에 원 그리기

직사각형과 달리 자바스크립트에는 원을 그리는 특별한 방법이 없습니다. 대신, 캔버스에 원을 그리기 위해 호를 그리는 데 사용되는 arc() 메서드를 사용할 수 있습니다. 원이 있는 캔버스를 얻으려면 다음을 사용할 수 있습니다.

구문:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

로그인 후 복사

다음은 서클이 있는 페이지의 예입니다.

코드:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas with a circle</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(250, 150, 90, 0, 2 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="300"></canvas>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

3. HTML 캔버스에 텍스트 그리기

HTML 캔버스에도 텍스트를 그릴 수 있습니다. 캔버스에 텍스트를 가져오려면 filltext() 메서드를 사용할 수 있습니다. 다음은 캔버스 요소 내부에 텍스트가 포함된 HTML 페이지의 예입니다.

코드:

<html lang="en">
<head>
<meta charset="utf-8">
<title>canvas with text inside the element</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.font = "bold 28px Arial";
context.fillText("This is text inside a canvas", 60, 100);
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="500" height="200"></canvas>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

4. HTML 캔버스 안에 호 그리기

원에 대해 이야기한 것처럼 HTML Canvas 내부에 호를 그리는 데 사용되는 arc()라는 메서드가 있습니다. 변수를 추가하기만 하면 되는 메소드의 구문은 다음과 같습니다.

context.arc(centerX, centerY, radiusOfArc, startAngle, endAngle, counterclockwise);

로그인 후 복사

다음은 캔버스 요소 내부에 호가 있는 HTML 페이지입니다.

코드:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Arc inside an HTML Canvas</title>
<style>
canvas {
border: 3px solid red;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("examplecanvas");
var context = canvas.getContext("2d");
context.arc(300, 300, 200, 1.2 * Math.PI, 1.8 * Math.PI, false);
context.stroke();
};
</script>
</head>
<body>
<canvas id="examplecanvas" width="600" height="400"></canvas>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

5. 선형 또는 원형 색상 그라데이션 그리기

이 메소드를 사용하여 createLienearGradient()를 사용하여 캔버스 요소 내부에 원하는 그라데이션을 그릴 수 있습니다. 이 방법을 사용하면 addColorStop()을 사용하여 그라디언트 색상을 표시해야 합니다.

구문:

var gradient = context.createLinearGradient(startX, startY, endX, endY);

로그인 후 복사

선형 그래디언트가 있는 페이지는 다음과 같습니다.

코드:

<html>
<body>
<canvas id="examplecanvas" width="400" height="200" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas.</canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"red");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,300,150);
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스

마찬가지로 원형 그래디언트를 그리는 방법은 createRadialGradient()입니다.

구문:

var gradient = context.createRadialGradient(startX, startY, startingRadius, endX, endY, endingRadius);

로그인 후 복사

코드:

<html>
<body>
<canvas id="examplecanvas" width="200" height="100" style="border:2px solid red;">
If you are seeing this. the browser does not support the HTML5 canvas. </canvas>
<script>
var c = document.getElementById("examplecanvas");
var ctx = c.getContext("2d");
var gradient = ctx.createRadialGradient(80,50,10,100,50,90);
gradient.addColorStop(0,"blue");
gradient.addColorStop(1,"yellow");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 캔버스