suchen

Heim >Web-Frontend >H5-Tutorial >HTML5-5 __Canvas: Farbverlauf

HTML5-5 __Canvas: Farbverlauf

黄舟
黄舟Original
2017-02-18 14:24:201407Durchsuche

Verlauf ist eine Zeichenmethode, die auf Farben angewendet wird.

Die Verwendung eines Verlaufs erfordert drei Schritte:

Erstellen Sie ein Verlaufsobjekt

2. Legen Sie die Farbe für das Verlaufsobjekt fest, dh verwenden Sie die Funktion addColorStop(), um die Übergangsmethode anzugeben. Mit der Funktion addColorStop können Sie zwei Parameter angeben: Farbe und Offset die der Entwickler erreichen möchte. Die Farbe, die für Striche oder Füllungen verwendet werden soll. Der Versatz ist ein Wert zwischen 0,0 und 1,0, der den Abstand entlang der Verlaufslinie darstellt.

3 Legen Sie den Füllstil oder Strichstil für den Kontextverlauf fest.

Verlauf kann man sich als die Farbe vorstellen, die sich entlang einer Linie langsam ändert.

Bitte beachten Sie den Code


<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>渐变</title>

  <canvas id="trails" style="border: 1px solid;"  width="400" height="400"> </canvas>
  <script>
        var gravel = new Image();
        gravel.src = "gravel.jpg";
        gravel.onload = function () {
            drawTrails();
        }

        function createCanopyPath(context) {
            context.beginPath();
            context.moveTo(-25, -50);
            context.lineTo(-10, -80);
            context.lineTo(-20, -80);
            context.lineTo(-5, -110);
            context.lineTo(-15, -110);

            context.lineTo(0, -140);

            context.lineTo(15, -110);
            context.lineTo(5, -110);
            context.lineTo(20, -80);
            context.lineTo(10, -80);
            context.lineTo(25, -50);
            context.closePath();
        }

        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            context.save();
            context.translate(130, 250);

            // 创建用作树干纹理的三阶水平渐变
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);

            // The beginning of the trunk is medium brown
            trunkGradient.addColorStop(0, &#39;#663300&#39;);

            // 树干中间偏左的位置颜色要淡一些
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);

            // 树干右侧边缘的颜色要深一些
            trunkGradient.addColorStop(1, &#39;#552200&#39;);

            // 使用渐变色填充树干
            context.fillStyle = trunkGradient;
            context.fillRect(-8, -50,15, 100);
            //然后，创建垂直渐变，以用作树冠在树干上投影
            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);

            // 投影渐变的起点是透明度设为50%的黑色
            canopyShadow.addColorStop(0, &#39;rgba(0, 0, 0, 0.5)&#39;);

            // 方向垂直向下， 渐变色在很短的距离内迅速渐变至完全透明， 这段长度之外的树干上没有投影
            canopyShadow.addColorStop(0.2, &#39;rgba(0, 0, 0, 0.0)&#39;);

            // 在树干上填充投影渐变
            context.fillStyle = canopyShadow;
            context.fillRect(-5, -50, 10, 50);

            createCanopyPath(context);

            context.lineWidth = 4;
            context.lineJoin = &#39;round&#39;;
            context.strokeStyle = &#39;#663300&#39;;
            context.stroke();

            context.fillStyle = &#39;#339900&#39;;
            context.fill();

            context.restore();
        }

  </script>
</html>





Zusätzlich zum oben genannten linearen Farbverlauf auch Leinwand Unterstützt radiale Farbverläufe, bei denen sich die Farbe in einem kegelförmigen Bereich zwischen zwei angegebenen Kreisen sanft ändert. Die

-Methode ist createRaddialGraddient(x0,y 0, r0, x1, y1, r1); Insgesamt gibt es 6 Parameter. Die ersten 3 Parameter stellen einen Kreis mit (x0, y0) als Mittelpunkt und r0 als Radius dar. Die letzten 3 Parameter stellen einen weiteren Kreis mit (x1, y1) als Mittelpunkt und r1 als Radius dar . Der Farbverlauf wird im Bereich zwischen den beiden Kreisen angezeigt.

Kiesel.jpg


Das Obige ist der Inhalt von HTML5 5 __Canvas: Farbverlauf Für weitere verwandte Inhalte achten Sie bitte darauf zur chinesischen PHP-Website (www.php.cn)!


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：HTML5 4__Canvas API: Kurven und Transformationen zeichnenNächster Artikel：HTML5 4__Canvas API: Kurven und Transformationen zeichnen

In Verbindung stehende Artikel

Mehr sehen