HTML5 contient de nombreux nouveaux éléments, mais c'est pour nous permettre de créer plus facilement de plus belles pages Web. Jetons maintenant un coup d'œil à l'élément que je présente ci-dessous HTML5 Canvas<.>Dernière modification le 01 août 2017 La balise définit des graphiques, tels que des graphiques et autres images, et vous devez utiliser des scripts pour dessiner des graphiques. Dessinez un rectangle rouge, un rectangle dégradé, un rectangle coloré et du texte coloré sur la toile. Qu'est-ce que Canvas ?L'élément HTML5 est utilisé pour dessiner des graphiques, ce qui se fait via des scripts (généralement JavaScript). La balise est simplement. un conteneur graphique, vous devez utiliser un script pour dessiner le graphique. Vous pouvez utiliser Canva pour dessiner des chemins, des cases, des cercles, des personnages et ajouter des images de différentes manières. À quoi sert le canevas html5 ?La balise HTML5 est utilisée pour dessiner des images (via un script, généralement JavaScript). Cependant, l'élément lui-même n'a aucune capacité de dessin (c'est juste un conteneur pour les graphiques) - vous devez utiliser un script pour effectuer le dessin proprement dit. La méthode getContext() renvoie un objet qui fournit des méthodes et des propriétés pour dessiner sur le canevas. Prise en charge des navigateursInternet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge l'élément.Remarque : Internet Explorer 8 et les versions antérieures d'IE. le navigateur ne prend pas en charge l'élément.Créer un canevas (Canvas)Un canevas est une boîte rectangulaire dans une page Web, dessinée à travers l'élément.Remarque : valeur par défaut L'élément inférieur n'a ni bordure ni contenu. Un exemple simple est le suivant, tel que :Copier après la connexionRemarque : les balises doivent généralement spécifier un attribut id (souvent référencé dans les scripts), des attributs de largeur et de hauteur pour définir la taille. du canevas. Conseil : Vous pouvez utiliser plusieurs éléments dans une page HTML Utilisez l'attribut style pour ajouter des bordures, telles que : <. 🎜>Exemple d'analyse : Copier après la connexion Tout d'abord, recherchez l'élément : var c=document.getElementById("myCanvas");Ensuite, créez le contexte object : var ctx =c.getContext("2d");getContext("2d") L'objet est un objet HTML5 intégré avec plusieurs méthodes pour dessiner des chemins, des rectangles et des cercles. , des personnages et l'ajout d'images. Les deux lignes de code suivantes dessinent un rectangle rouge : ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);Définissez la propriété fillStyle sur une couleur, un dégradé ou un motif CSS. Le paramètre fillStyle par défaut est #000000 (noir). La méthode fillRect(x,y,width,height) définit la méthode de remplissage actuelle du rectangle. Coordonnées du canevasle canevas est une grille bidimensionnelle. Les coordonnées du coin supérieur gauche du canevas sont (0,0)La méthode fillRect ci-dessus a des paramètres (0,0,150,75). Moyens : Dessinez un rectangle de 150x75 sur la toile, en partant du coin supérieur gauche (0,0). Canvas - Chemin Pour tracer une ligne sur Canvas, nous utiliserons les deux méthodes suivantes : moveTo(x,y) pour définir les coordonnées de départ de la ligne lineTo(x,y) définit la coordonnée de fin de la lignePour tracer la ligne, nous devons utiliser la méthode "ink", tout comme Stroke(). Ceci est un exemple : Pour dessiner un cercle dans le canevas, nous utiliserons la méthode suivante : 您的浏览器不支持 HTML5 canvas 标签。 var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); Copier après la connexionarc(x,y,r,start,stop)En fait, lorsque nous dessinons un cercle, nous utilisons la méthode "ink", comme Stroke() ou fill()Autre exemple : Votre navigateur ne prend pas en charge la balise canevas HTML5. Copier après la connexionCanvas - texte var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); Copier après la connexionUtilisez le canevas pour dessiner du texte Les propriétés et méthodes importantes sont les suivantes : police - définir la policefillText(text,x,y) - Dessiner du texte plein sur la toileStrokeText(text,x,y) - Dessiner du texte creux sur la toileCanvas - Dégradé Le dégradé peut être rempli de rectangles, de cercles, de lignes, de texte, etc. Différentes formes peuvent être personnalisées avec différentes couleurs. Il existe deux manières différentes de définir les dégradés du canevas : createLinearGradient(x,y,x1,y1) - Créer des dégradés de lignescreateRadialGradient(x,y, r, x1,y1,r1) - Créer un dégradé radial/circulaireLorsque nous utilisons des objets dégradés, nous devons utiliser deux couleurs d'arrêt ou plus. La méthode addColorStop() spécifie l'arrêt de couleur. Les paramètres sont décrits par des coordonnées, qui peuvent être de 0 à 1. Utilisez le dégradé, définissez la valeur de fillStyle ou StrokeStyle sur le dégradé, puis dessinez une forme, telle qu'un rectangle, du texte ou une ligne. [Recommandations associées] Éléments de base du HTML, vous permettant d'apprendre le HTML à partir de zéro Nouvelles balises en HTML5 centent