" dans le corps ; enfin, définissez le style graphique via les attributs CSS."/> " dans le corps ; enfin, définissez le style graphique via les attributs CSS.">

Maison  >  Article  >  interface Web  >  Comment dessiner des graphiques via la balise Canvas

Comment dessiner des graphiques via la balise Canvas

藏色散人
藏色散人original
2018-11-30 10:37:003739parcourir

Comment dessiner des graphiques via la balise Canvas : créez d'abord un exemple de fichier HTML ; puis entrez "" dans le corps ; attributs css Il suffit de le styliser.

Comment dessiner des graphiques via la balise Canvas

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

La balise Canvas est un nouvel élément en HTML5. Cette balise est utilisée pour le dessin graphique. HTML5 est la cinquième révision majeure du langage HTML (Hypertext Markup Language), le langage de base du World Wide Web et une application sous Standard Universal Markup Language.

Donc, pour les débutants qui apprennent le HTML, ils ne comprendront peut-être pas cet élément de balise.

Ci-dessous, nous pouvons utiliser un exemple simple pour vous présenter l'utilisation détaillée de la balise Canvas.

L'exemple de code pour dessiner un graphique de toile simple (rectangle) à l'aide de toile est le suivant :

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title>Canvas简单使用示例</title>
    <style type="text/css">
        #FirstCanvas{
            width: 450px;
            height: 300px;
            border: 3px solid #3262ff;
            background-color: #acffcb;
        }
    </style>
</head>
<body>
<canvas id="FirstCanvas"></canvas>
</body>
</html>

Étude de référence recommandée : "Tutoriel HTML5"

L'effet graphique est le suivant :

Comment dessiner des graphiques via la balise Canvas

L'étiquette n'est qu'un conteneur graphique, et nous devons utiliser un script pour dessiner le graphique. En d'autres termes, cette balise doit généralement spécifier un attribut id pour que nous puissions l'utiliser dans le script. (Ce script fait généralement référence à un script JavaScript)

Il convient de noter ici que par défaut l'élément n'a ni bordure ni contenu, nous devons donc utiliser l'attribut style pour ajouter la largeur de la bordure et width height height, puis définissez la taille de la toile.

Cet article concerne le dessin de graphiques simples sur toile via la balise canvas. J'espère qu'il sera utile aux amis. besoin!

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn