HTML 캔버스

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

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

HTML 캔버스란 무엇인가요?

HTML 캔버스( 태그를 통해 사용됨)는 사용자 컴퓨터 화면에 그래픽(선, 막대, 그래프 등)을 즉시 그리는 데 사용되는 HTML 요소입니다. 하지만 캔버스 요소는 정보를 담는 컨테이너일 뿐입니다. 그림은 JavaScript를 통해 수행됩니다. 이는 HTML5를 지원하고 JavaScript를 렌더링할 수 있는 모든 최신 웹 브라우저에서 지원됩니다. HTML 캔버스를 만드는 것은 매우 간단하며 다음을 통해 HTML 페이지를 만들 수 있습니다.

구문:

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

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

코드:

<style>
#examplecanvas{border:2px solid green;}
</style>


<canvas id="examplecanvas" width="500" height="300"></canvas>

출력:

HTML 캔버스 드로잉 예시

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

1. 페이지에 선 그리기

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

코드:

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


<canvas id="examplecanvas" width="400" height="300"></canvas>

출력:

2. HTML 캔버스에 원 그리기

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

 구문:

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

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

코드:

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


<canvas id="examplecanvas" width="500" height="300"></canvas>

출력:

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

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

코드:

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


<canvas id="examplecanvas" width="500" height="200"></canvas>

출력:

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

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

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

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

코드:

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


<canvas id="examplecanvas" width="600" height="400"></canvas>

출력:

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

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

구문:

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

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

코드:

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

출력:

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

구문:

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

코드:

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

출력:

결론

이제 이것이 무엇인지, 웹 페이지에서 어떻게 사용할 수 있는지 익숙해졌으니 웹 디자인 기술에 더 자신감을 가지셔야 합니다. 어떤 경우에는 이미지를 사용할 수 있지만 HTML 캔버스의 장점은 크기와 처리 능력 측면에서 확장성이 뛰어나고 훨씬 가볍다는 것입니다.

위 내용은 HTML 캔버스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!