Heim > Artikel > Web-Frontend > HTML5 7 __Canvas: Skalieren, Drehen, Schatten erzeugen

HTML5 7 __Canvas: Skalieren, Drehen, Schatten erzeugen

黄舟Original: 2017-02-18 14:34:181451Durchsuche

1. Die Funktion „scale()“ der Canvas-API wird für die Skalierung verwendet.

scale() verwendet zwei Parameter, die die beiden Parameter von x darstellen bzw. y. Wenn jeder Parameter ein Bild auf der Leinwand anzeigt, wird ihm der Betrag übergeben, um den das Bild auf der Achse dieser Richtung vergrößert (oder verkleinert) werden soll Alle Elemente im gezeichneten Bild werden doppelt so breit. Wenn der y-Wert 0,5 beträgt, werden alle Elemente des gezeichneten Bildes halb so hoch wie zuvor.

Zum Beispiel kann das folgende Programm ganz einfach einen neuen Baum auf Leinwand erstellen.

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>缩放示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </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();
        }

        // 将绘制树的方法 放到 drawTree()，方便重用
        function drawTree(context) {
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);

            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            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();
        }

        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            // 在 X=130, Y=250的位置绘制第一棵树
            context.save();
            context.translate(130, 250);
            drawTree(context);
            context.restore();
            // 在 X=260, Y=500 位置绘制第二棵树
            context.save();
            context.translate(260, 500);

            // 将第二棵树的宽高分别放大至原来的2倍
            context.scale(2, 2);
            drawTree(context);
            context.restore();

            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }
  </script>
</html>

2. Drehen Sie context.rotate(angle), Der Parameter Winkel ist im Bogenmaß angegeben

Sehen Sie sich den Code an

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>旋转示例</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </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();
        }

        // 将绘制树的方法 放到 drawTree()
        function drawTree(context) {
            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);

            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            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();
        }

        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            // 在 X=130, Y=250的位置绘制第一棵树
            context.save();
            context.translate(100, 150);
            context.rotate(1.57);    //旋转角度以弧度为单位
            drawTree(context);
            context.restore();

            context.save();
            context.translate(-10, 450);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }

  </script>
</html>

Die oben genannten Beispiele müssen Sie beachten:

> Führen Sie die Transformationsoperation der Grafik und des Pfads immer im Ursprung aus Warum sollte die Transformationsoperation der Grafik und des Pfads im Ursprung des Ursprungs und Übertragen Sie es dann nach der Ausführung gleichmäßig. Transformationsvorgänge wie Skalieren und Drehen werden alle am Ursprung ausgeführt.

Wenn Sie eine Grafik drehen, die sich nicht am Ursprung befindet, dreht sich die Grafik um den Ursprung, anstatt sich zu drehen an Ort und Stelle. Wenn die Grafiken beim Skalieren nicht an den richtigen Koordinaten platziert werden, werden ebenfalls alle Koordinaten gleichzeitig skaliert und die neuen Koordinaten können den Leinwandbereich überschreiten.

3. Erstellen Sie Schatten

Das folgende Beispiel zeigt, wie Sie die Pfadkoordinaten frei in Fundamentally umwandeln können Ändert nun die Pfaddarstellung des Baums und erzeugt letztendlich einen Schatteneffekt. Zugehöriger Code:

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
  <title>变换阴影</title>
  <canvas id="trails" style="border: 1px solid;"  width="400" height="600"> </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 drawTree(context) {
            context.save();
            // X值随着Y值的增加而增加，借助拉伸变换，可以创建一棵用作阴影的倾斜的树，应用了
            // 变换以后，所有坐标都与矩阵相乘
            context.transform(1, 0, -0.5, 1,  0, 0);

            // 在Y轴方向，将阴影的高度压缩为原来的60%
            context.scale(1, 0.6);

            // 使用透明度为20%的黑色填充树干
            context.fillStyle = &#39;rgba(0, 0, 0, 0.2)&#39;;
            context.fillRect(-5, -50, 10, 50);

            // 使用已有的阴影效果重新绘制
            createCanopyPath(context);
            context.fill();
            context.restore();

            var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);
            trunkGradient.addColorStop(0, &#39;#663300&#39;);
            trunkGradient.addColorStop(0.4, &#39;#996600&#39;);
            trunkGradient.addColorStop(1, &#39;#552200&#39;);
            context.fillStyle = trunkGradient;
            context.fillRect(-5, -50, 10, 50);

            var canopyShadow = context.createLinearGradient(0, -50, 0, 0);
            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();
        }
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            context.save();
            context.translate(130, 250);
            drawTree(context);
            context.restore();

            context.save();
            context.translate(260, 500);
            context.scale(2, 2);
            drawTree(context);
            context.restore();

            context.save();
            context.translate(-10, 350);
            context.beginPath();
            context.moveTo(0, 0);
            context.quadraticCurveTo(170, -50, 260, -190);
            context.quadraticCurveTo(310, -250, 410,-250);
            context.strokeStyle = context.createPattern(gravel, &#39;repeat&#39;);
            context.lineWidth = 20;
            context.stroke();
            context.restore();
        }
  </script>
</html>

Bei der Analyse der mathematischen Bedeutung dieser Transformation können Sie erkennen, dass durch Anpassen des Y -axis Der dem Wert entsprechende Parameter ändert den Wert der X-Achse. Dies geschieht, um einen grauen Baum für den Schatten zu strecken. Als nächstes haben wir den beschnittenen Baum im Verhältnis 60 % auf die entsprechende Größe verkleinert.

Der ausgeschnittene „Schatten“-Baum wird zuerst angezeigt, sodass der echte Baum entsprechend der Z-Achse (der überlappenden Reihenfolge der Objekte auf der Leinwand) über dem Schatten angezeigt wird ). Darüber hinaus wird der Baumschatten mithilfe der RGBA-Funktion von CSS gefüllt. Mit dieser Funktion stellen wir den Transparenzwert unter normalen Bedingungen auf 20 % ein. An diesem Punkt ist der Baumschatten mit einem durchscheinenden Effekt fertig.

Das im Beispiel verwendete Bild grave.jpg finden Sie im vorherigen Blogbeitrag.

Das Obige ist der Inhalt von HTML5 7 __Canvas: Skalieren, Drehen und Erstellen von Schatten. Weitere verwandte Inhalte finden Sie auf der 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 von 6 __Canvas: Bilder einfügen, Rückruf ausführen, wenn die Bilder geladen werdenNächster Artikel：HTML5 von 6 __Canvas: Bilder einfügen, Rückruf ausführen, wenn die Bilder geladen werden

In Verbindung stehende Artikel

Mehr sehen