Comment dessiner un dégradé linéaire dynamique à l'aide de HTML5 Canvas-Tutoriel H5-php.cn

Comment dessiner un dégradé linéaire dynamique à l'aide de HTML5 Canvas

不言

Libérer： 2018-12-05 10:12:08

original

4541 Les gens l'ont consulté

Si vous souhaitez utiliser HTML5 Canvas pour dessiner un dégradé linéaire, vous devez utiliser la méthode createLinearGradient(). Jetons un coup d'œil au contenu spécifique ci-dessous.

HTML5 canvas

createLinearGradient()

Les paramètres de createLinearGradient() sont les suivants.

createLinearGradient (coordonnée X de la position de départ du dégradé, coordonnée Y de la position de départ du dégradé, coordonnée X de la position de fin du dégradé, coordonnée Y de la position de fin du dégradé)

Voyons regardez un exemple spécifique

Le code est le suivant

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
  <style>
    body {
      background: #C0C0C0;
    }  
</style>
  <script>
    function PageLoad() {
      var CanvasWidth = 1200;      
      var CanvasHeight = 480;      
      var canvas = document.getElementsByTagName(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;      
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, &#39;#000000&#39;);
        grad.addColorStop(1, &#39;#2869fd&#39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        canvas.addEventListener(&#39;mousemove&#39;, function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);
      }
    }  
</script>
</head>
<body onload="PageLoad();">
  <canvas width="1200" height="480"></canvas>
</body>
</html>

Copier après la connexion

Explication :

L'événement onload de la balise body exécute le PageLoad( ) fonction lorsque la page est affichée.
Le code suivant en plus de l'écouteur d'événement sera traité lorsque la page sera affichée.
Pour dessiner sur le canevas, utilisez la méthode getElementsByTagName() pour obtenir l'objet canevas à partir de l'ID. Appelez la méthode getContext() sur l'objet canevas pour obtenir le contexte du canevas. Initialisez le canevas en appelant la méthode clearRect().
Les dégradés créés sont créés par la méthode createLinearGradient(). Si la création réussit, l'objet dégradé sera renvoyé comme valeur de retour. La couleur de début et la couleur de fin du dégradé sont définies par la méthode addColorStop() de l'objet dégradé.
Dessiner un dégradé sur le canevas Vous pouvez dessiner un dégradé sur le canevas en attribuant l'objet dégradé au fillStyle du contexte et en exécutant la méthode fillRect().

   function PageLoad() {
      var CanvasWidth = 1200;
      var CanvasHeight = 480;
      var canvas = document.getElementsByTagName(&#39;canvas&#39;)[0],
          ctx = null,
          grad = null,
          color = 255;
      if (canvas.getContext(&#39;2d&#39;)) {
        ctx = canvas.getContext(&#39;2d&#39;);
        ctx.clearRect(0, 0, CanvasWidth, CanvasHeight);
        grad = ctx.createLinearGradient(0, 0, CanvasWidth, CanvasHeight);
        grad.addColorStop(0, &#39;#000000&#39;);
        grad.addColorStop(1, &#39;#2869fd&#39;);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
      }
    }

Copier après la connexion

Si vous déplacez le pointeur de la souris dans le canevas, le code de l'écouteur d'événement suivant sera exécuté.
Créez un dégradé linéaire à partir des coordonnées du pointeur de la souris jusqu'au coin inférieur droit de la toile et dessinez-le sur la toile.

canvas.addEventListener(&#39;mousemove&#39;, function (evt) {
          var width = window.innerWidth,
          height = window.innerHeight,
          x = event.clientX,
          y = event.clientY,
          grad = ctx.createLinearGradient(x, y, CanvasWidth, CanvasHeight);
          grad.addColorStop(0, &#39;#000000&#39;);
          grad.addColorStop(1, &#39;#2869fd&#39;);
          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, CanvasWidth, CanvasHeight);
        }, false);

Copier après la connexion

Exécuter les résultats

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'écran ci-dessous s'affichera, complétant le dessin du dégradé.

HTML5 canvas