So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas-H5-Tutorial-php.cn

So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas

不言

Freigeben： 2018-12-05 10:12:08

Original

4504 Leute haben es durchsucht

Wenn Sie HTML5 Canvas zum Zeichnen eines linearen Farbverlaufs verwenden möchten, müssen Sie die Methode createLinearGradient() verwenden. Werfen wir einen Blick auf den spezifischen Inhalt unten.

HTML5 canvas

createLinearGradient()

Die Parameter von createLinearGradient() sind wie folgt.

createLinearGradient (X-Koordinate der Startposition des Gradienten, Y-Koordinate der Startposition des Gradienten, X-Koordinate der Endposition des Gradienten, Y-Koordinate der Endposition des Gradienten)

Lass uns Schauen Sie sich ein konkretes Beispiel an

Der Code lautet wie folgt

<!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>

Nach dem Login kopieren

Erklärung:

Das Onload-Ereignis des Body-Tags führt die PageLoad()-Funktion aus wenn die Seite angezeigt wird.
Der folgende Code wird zusätzlich zum Ereignis-Listener verarbeitet, wenn die Seite angezeigt wird.
Um auf der Leinwand zu zeichnen, verwenden Sie die Methode getElementsByTagName(), um das Leinwandobjekt aus der ID abzurufen. Rufen Sie die Methode getContext() für das Canvas-Objekt auf, um den Kontext des Canvas abzurufen. Initialisieren Sie die Leinwand, indem Sie die Methode „clearRect()“ aufrufen.
Erstellte Farbverläufe werden mit der Methode createLinearGradient() erstellt. Bei erfolgreicher Erstellung wird das Verlaufsobjekt als Rückgabewert zurückgegeben. Die Startfarbe und Endfarbe des Farbverlaufs werden durch die Methode addColorStop() des Farbverlaufsobjekts festgelegt.
Zeichnen eines Farbverlaufs auf der Leinwand Sie können einen Farbverlauf auf der Leinwand zeichnen, indem Sie das Farbverlaufsobjekt dem fillStyle des Kontexts zuweisen und die Methode fillRect() ausführen.

   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);
      }
    }

Nach dem Login kopieren

Wenn Sie den Mauszeiger im Canvas bewegen, wird der Code des folgenden Event-Listeners ausgeführt.
Erstellen Sie einen linearen Farbverlauf von den Mauszeigerkoordinaten bis zur unteren rechten Ecke der Leinwand und zeichnen Sie ihn auf der Leinwand.

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);

Nach dem Login kopieren

Laufergebnisse

Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Bildschirm wird angezeigt und vervollständigt die Verlaufszeichnung.

HTML5 canvas

Bewegen Sie die Maus auf der Leinwand. Der Farbverlauf wird von der Mausposition bis zur unteren rechten Ecke gezeichnet.

So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas

Wenn Sie die Maus bewegen, bewegt sich der Farbverlauf mit

So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas

HTML5 canvas

Das obige ist der detaillierte Inhalt vonSo zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!