Maison >interface Web >js tutoriel >Exemple complet de compétences en matière de dessin de toile JavaScript HTML5 dégradé Area_Javascript

Exemple complet de compétences en matière de dessin de toile JavaScript HTML5 dégradé Area_Javascript

WBOY
WBOYoriginal
2016-05-16 15:17:551534parcourir

L'exemple de cet article décrit comment dessiner une zone de dégradé à l'aide du canevas JavaScript html5. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    border:3px solid gray;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.rect(0, 0, 200, 200);
  ctx.closePath();
  var gradient = ctx.createLinearGradient(0, 0, 200, 200);
  gradient.addColorStop(0, "gray");
  gradient.addColorStop(0.5, "red");
  gradient.addColorStop(1, "blue");
  ctx.fillStyle = gradient;
  ctx.fill();
 </script>
</html>

Les lecteurs intéressés par plus de contenu lié aux effets spéciaux js peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery" et "Résumé de jQuery commun effets spéciaux classiques"

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.

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