이 기사에서는 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 캔버스 드로잉 예시
캔버스 요소를 사용하여 직사각형을 그리는 방법을 살펴보았으니 이제 브라우저 출력 화면에서 이 요소를 사용하여 그릴 수 있는 다른 개체를 살펴보겠습니다.
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>로그인 후 복사
출력:
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>로그인 후 복사
출력:
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>로그인 후 복사
출력:
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>로그인 후 복사
출력:
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>로그인 후 복사
출력:
마찬가지로 원형 그래디언트를 그리는 방법은 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 캔버스의 장점은 크기와 처리 능력 측면에서 확장성이 뛰어나고 훨씬 가볍다는 것입니다.
위 내용은 HTML 캔버스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
