Heim > Artikel > Web-Frontend > So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas

So zeichnen Sie einen dynamischen linearen Farbverlauf mit HTML5 Canvas

不言Original: 2018-12-03 13:43:424515Durchsuche

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>

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

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

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!

html5 html 指针对象事件 canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?Nächster Artikel：Wie realisiert HTML5-Canvas den Ein- und Ausblendeffekt von Mosaik (Code)?

In Verbindung stehende Artikel

Mehr sehen