HTML의 캔버스 태그
- WBOY원래의
- 2024-09-04 16:27:39590검색
캔버스는 브라우저 페이지에 이미지를 그리는 것을 의미합니다. HTML의 캔버스 태그는 작업할 수 있는 두 가지 이상의 색상을 포함할 수 있는 픽셀 맵으로 구성된 빈 캔버스와 같은 비트맵 표면을 HTML에 제공하는 요소 중 하나입니다. <캔버스> 요소는 JavaScript와 같은 스크립팅 언어의 도움으로 웹 페이지에 그래픽 이미지를 만드는 데 사용됩니다. <캔버스> 요소는 그래픽용 컨테이너처럼 작업할 빈 캔버스를 생성하지만 실제 생성, 그래픽, 이미지 그리기 등을 위해서는 자바스크립트를 사용해야 합니다.
처음에는 HTML이 캔버스를 지원하지 않았지만 나중에 HTML5에서 이 캔버스 기능을 도입했습니다. 이 <캔버스> HTML5의 태그는 JavaScript 스크립팅을 사용하여 그래픽을 그리는 데 사용됩니다. 이 캔버스 태그를 사용하여 이미지를 그릴 수도 있습니다. 캔버스 요소를 아름답게 만들고 애니메이션, 그래픽, 사진 조작, 데이터 시각화를 사용할 수 있습니다. 이 캔버스 기능은 Apple Company를 통해 Web Kit에 처음 도입되었습니다.
실시간 예:각각의 모든 모양에 대한 그래픽을 구현하기 위한 독립형 코드를 작성하는 대신 프로세서에 과부하가 발생합니다. 그래서 이런 상황을 극복하기 위해 개발자들은 HTML에서 캔버스 태그를 고안합니다. 적은 코드로 정확한 그래픽 애니메이션 형태를 얻을 수 있습니다.
구문
HTML의 캔버스 기능은
<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=”” //code </canvas> <script> //script code for animations and graphics </script>
HTML에서 캔버스 태그를 구현한 예
예는 다음과 같습니다.
예시 #1
캔버스가 있는 직사각형 안의 원 예:
코드:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: green;
text-align:center;
}
p
{
color:brown;
border: solid 2px blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Circle Shape inside Rectangle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
</script>
</body>
</html>
출력:
예시 #2
캔버스가 있는 원 모양 내부의 텍스트 예:
코드:
/strong><!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: red;
text-align:center;
}
p
{
color:green;
border: solid 2px maroon;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Text Inside the Circle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
creatingCircle.font = "30px Arial";//Creating a font
creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle
</script>
</body>
</html>
출력:
예시 #3
캔버스를 사용하여 선 그리기 예:
코드:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: blue;
text-align:center;
}
p
{
color:red;
border: solid 2px orange;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Draw the Line with Canvas
</h1>
<canvas id="lineID" width="400" height="400" style="border:2px solid orange;">
</canvas>
<script>
var line = document.getElementById("lineID");// with id drawing line shape with script
var lineCreate = line.getContext("2d");//get the line type from 2d shape
lineCreate.moveTo(0,0);//move the line
lineCreate.lineTo(400,400);//Where to where line has to move
lineCreate.stroke();//line stroke
</script>
</body>
</html>
출력:
예시 #4
캔버스를 사용한 삼각형 모양 예:
코드:
<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: fuchsia;
text-align:center;
}
p
{
color:blue;
border: solid 2px skyblue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Triangle Shape with Canvas
</h1>
<canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;">
</canvas>
<script>
var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script
if (canvas.getContext)
{
var traingle = canvas.getContext('2d');//get the traingels type from 2d shape
//Creating the traingle
traingle.beginPath();
traingle.moveTo(25,25);
traingle.lineTo(105,25);
traingle.lineTo(25,105);
traingle.fill();
// Triangle can be stroked with below fuctions
traingle.beginPath();
traingle.moveTo(125,125);
traingle.lineTo(125,45);
traingle.lineTo(45,125);
traingle.closePath();
traingle.stroke();
} else
{
alert('Your browser does ot support this feature');//alert the user
document.write('Your browser does ot support this feature');//display the output
}
</script>
</body>
</html>
출력:
결론
HTML5 버전에서는 캔버스 태그가 도입되었습니다. 캔버스와 JavaScript 코드 모두 캔버스 태그를 사용하여 그릴 수 있는 정확한 모양을 제공합니다. 원, 직사각형, 선, 삼각형 모양 등을 그릴 수 있습니다.
위 내용은 HTML의 캔버스 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!