Balise Canvas en HTML-tutoriel HTML-php.cn

Balise Canvas en HTML

WBOY

Libérer： 2024-09-04 16:27:39

original

588 Les gens l'ont consulté

Canvas signifie dessiner des images sur les pages du navigateur. La balise Canvas en HTML est l'un de ces éléments qui fournit au HTML une surface bitmap, comme un canevas vierge constitué d'une carte de pixels, pouvant contenir plus de deux couleurs, avec laquelle travailler. La L'élément est utilisé pour créer des images graphiques sur les pages Web à l'aide d'un langage de script, comme JavaScript. La L'élément crée un canevas vide avec lequel travailler, comme un conteneur pour les graphiques, mais vous devrez utiliser javascript pour la création proprement dite, en dessinant les graphiques, les images, etc.

Au départ, HTML ne prend pas en charge le canevas, mais plus tard, HTML5 a introduit cette fonctionnalité de canevas. Cette La balise en HTML5 est utilisée pour dessiner des graphiques à l'aide de scripts JavaScript. Nous pouvons également dessiner des images avec cette balise canvas. Pour rendre les éléments du canevas magnifiques, vous pouvez utiliser l'animation, les graphiques, la manipulation de photos, la visualisation de données. Cette fonctionnalité de canevas a été initialement introduite dans Web Kit via Apple Company.

Exemple en temps réel :Au lieu d'écrire du code autonome pour implémenter des graphiques pour chaque forme, cela deviendra une surcharge sur le processeur. Alors pour surmonter ce genre de situations, les développeurs proposent une balise canvas en HTML. Moins de code peut nous donner une forme d'animation graphique exacte.

Syntaxe

La fonctionnalité Canvas en HTML fonctionne en appliquant

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

Copier après la connexion

Exemples d'implémentation de la balise Canvas en HTML

Voici l'exemple :

Exemple n°1

Un cercle à l'intérieur d'un rectangle avec un exemple de toile :

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>

Copier après la connexion

Sortie :
Balise Canvas en HTML

Exemple n°2

Texte à l'intérieur de la forme du cercle avec Canvas Exemple :

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>

Copier après la connexion

Sortie :

Balise Canvas en HTML

Exemple #3

Tracez la ligne avec Canvas Exemple :

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>

Copier après la connexion

Sortie :

Balise Canvas en HTML

Exemple n°4

Forme triangulaire avec exemple de toile :

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>

Copier après la connexion

Sortie :

Balise Canvas en HTML

Conclusion

La balise canvas est introduite dans la version HTML5. Le code Canvas et JavaScript vous donne des formes précises à dessiner avec la balise Canvas. Nous pouvons dessiner des formes de cercle, de rectangle, de ligne, de triangle, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!