Comment dessiner un rectangle dégradé avec un canevas en HTML5-tutoriel HTML-php.cn

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

yulia

Libérer： 2018-10-19 17:44:45

original

3123 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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!