Heim > Artikel > Web-Frontend > Canvas-Tag in HTML
Canvas-Tag in HTML
- WBOYOriginal
- 2024-09-04 16:27:39564Durchsuche
Canvas bedeutet das Zeichnen von Bildern auf den Browserseiten. Das Canvas-Tag in HTML ist ein solches Element, das HTML eine Bitmap-Oberfläche zum Arbeiten bereitstellt, etwa eine leere Leinwand, die aus einer Pixelkarte besteht, die mehr als zwei Farben enthalten kann. Die
Anfangs unterstützte HTML kein Canvas, aber später führte HTML5 diese Canvas-Funktion ein. Dieses
Echtzeitbeispiel:Anstatt eigenständigen Code für die Implementierung von Grafiken für jede einzelne Form zu schreiben, wird der Prozessor überlastet. Um solche Situationen zu bewältigen, haben Entwickler ein Canvas-Tag in HTML entwickelt. Weniger Code kann uns eine exakte grafische Animationsform geben.
Syntax
Canvas-Funktion in HTML funktioniert durch Anwenden von
<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>
Beispiele zur Implementierung des Canvas-Tags in HTML
Hier ist das Beispiel:
Beispiel #1
Ein Kreis innerhalb eines Rechtecks mit Canvas-Beispiel:
Code:
<!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>
Ausgabe:
Beispiel #2
Text innerhalb der Kreisform mit Canvas-Beispiel:
Code:
/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>
Ausgabe:
Beispiel #3
Zeichnen Sie die Linie mit Canvas-Beispiel:
Code:
<!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>
Ausgabe:
Beispiel #4
Dreiecksform mit Canvas-Beispiel:
Code:
<!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>
Ausgabe:
Fazit
Das Canvas-Tag wird in der HTML5-Version eingeführt. Sowohl Canvas- als auch JavaScript-Code bieten Ihnen genaue Formen zum Zeichnen mit Canvas-Tags. Wir können einen Kreis, ein Rechteck, eine Linie, Dreiecksformen usw. zeichnen.
Das obige ist der detaillierte Inhalt vonCanvas-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!