Maison > Article > interface Web > Comment dessiner un rectangle dégradé avec un canevas en HTML5

Comment dessiner un rectangle dégradé avec un canevas en HTML5

yuliaoriginal: 2018-10-19 17:44:453135parcourir

Canvas est une nouvelle fonctionnalité de HTML5. Il peut dessiner divers effets intéressants sur le navigateur. En tant que développeur front-end, savez-vous comment utiliser Canvas pour dessiner des graphiques ? Cet article vous expliquera comment utiliser Canvas pour dessiner un rectangle et un rectangle dégradé. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

La balise

Exemple 1 : utilisez canvas pour dessiner un rectangle rouge. Les étapes spécifiques sont les suivantes :

Étape 1 : utilisez document.getElementById() pour rechercher l'élément

Deuxième étape : utilisez getContext("2d") pour créer un objet contextuel

Étape 3 : L'attribut fillStyle peut définir la couleur du rectangle. Dans cet exemple, il est défini sur rouge ; La méthode (x, y, largeur, hauteur) peut être utilisée pour le dessiner. Un rectangle rempli, x représente la coordonnée de l'axe X du coin supérieur gauche du rectangle, y représente la coordonnée de l'axe Y du coin supérieur gauche de le rectangle, width représente la largeur du rectangle, et height représente la hauteur du rectangle

Le code complet est le suivant :

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(25,10,150,80);
</script>

Rendu :

Comment dessiner un rectangle dégradé avec un canevas en HTML5

Exemple 2 : Utilisez canvas pour dessiner un rectangle dégradé, le code est le suivant :

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"orange");
  grd.addColorStop(1,"red");  
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(25,10,150,80);
</script>

createLinearGradient( x,y,x1,y1) peut créer des dégradés linéaires. en utilisant des dégradés, vous devez utiliser deux couleurs ou plus

méthode addColorStop() pour indiquer l'arrêt de couleur, qui peut être de 0 à 1

Utilisez fillStyle pour définir la couleur du rectangle, puis utilisez fillRect( x, y, largeur, hauteur) pour dessiner le rectangle

L'effet est comme indiqué sur la figure :

Comment dessiner un rectangle dégradé avec un canevas en HTML5

Ci-dessus Il présente en détail la méthode de dessiner des rectangles et des rectangles dégradés avec une toile. C'est relativement simple. Les débutants peuvent l'essayer par eux-mêmes pour voir s'ils peuvent dessiner de plus beaux graphiques. J'espère que cet article vous sera utile !

Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo HTML5

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!

JavaScript html5 对象 canvas

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

Article précédent：Introduction à la méthode d'implémentation d'opérations d'annulation et de transfert interactives riches dans les applications Web (code)Article suivant：Introduction à la méthode d'implémentation d'opérations d'annulation et de transfert interactives riches dans les applications Web (code)

Articles Liés

Voir plus