HTML5 4__Canvas API: Kurven und Transformationen zeichnen-H5-Tutorial-php.cn

HTML5 4__Canvas API: Kurven und Transformationen zeichnen

黄舟

Freigeben： 2017-02-18 14:20:00

Original

1563 Leute haben es durchsucht

Einer der Ausgangspunkte für die HTML5-Entwicklung ist Canvas, mit dem Grafiken, Diagramme, Bilder und Animationen dynamisch generiert und angezeigt werden können.

Vor der Einführung von Canvas mussten Entwickler nur die Zeichen-API verwenden Im Browser können Sie die Flash- und SVG-Plugins (Scalable Vector Graphics) oder VML (Vector Markup Language) verwenden, die nur vom IE unterstützt werden, sowie einige JS-Kenntnisse.

Canvas ist im Wesentlichen eine Bitmap-Leinwand. Die darauf gezeichneten Grafiken sind nicht skalierbar und können nicht wie SVG-Bilder skaliert werden. Außerdem gehören mit Canvas gezeichnete Objekte nicht zur Seite.DOM-Struktur oder ein beliebiger Namespace, der als Fehler gilt, SVG-Bilder können bei verschiedenen Auflösungen reibungslos skaliert werden und unterstützen die Klickerkennung. Obwohl Canvas offensichtliche Mängel aufweist, hat die Canvas-API zwei Vorteile:

1 Es ist nicht erforderlich, jedes Grundelement im gezeichneten Bild als Objekt zu speichern, und die Ausführungsleistung ist sehr gut.

2. Es ist relativ einfach, die Canvas-API basierend auf den vorhandenen hervorragenden zweidimensionalen Zeichen-APIs in anderen Programmiersprachen zu implementieren.

1. Stellen Sie zunächst die Leinwand vor, um Kurven zu zeichnenSehen Sie sich den Code an

Laufeffekt im Chrome
Browser

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8" />
    <title>绘制曲线</title>
    <script language="javascript">
        function drawTrails() {
            var canvas = document.getElementById(&#39;trails&#39;);
            var context = canvas.getContext(&#39;2d&#39;);
            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 = &#39;#663300&#39;;
            context.lineWidth = 20;
            context.stroke();
            //恢复之前的canvas 状态
            context.restore();
        }
        window.addEventListener("load", drawTrails, true);
    </script>
</head>
<body>
    <canvas height="400" width="400" id="trails" style="border: 1px solid;"/>
</body>
</html>

Nach dem Login kopieren

2. Transformation
Eine Möglichkeit, Bilder auf Leinwand zu zeichnen, ist die Verwendung von Transformation. Tatsächlich ist Transformation die beste Möglichkeit, komplexe Leinwandoperationen umzusetzen.

Sie können Transformation so verstehen: Stellen Sie sich das so vor eine vom Entwickler ausgegebene Funktion Eine modifizierte positive Ebene zwischen dem Befehl und dem Ergebnis der Leinwandanzeige,

Das folgende Beispiel zeigt, wie die einfachste Transformationsmethode verwendet wird ---------translate()

Siehe Code

Laufeffekt

<!DOCTYPE html>
<html>
  <meta charset="utf-8" />
  <title>变换对角线</title>

  <canvas id="diagonal" style="border: 1px solid;"  width="200" height="200"> </canvas>
  <script>
        function drawDiagonal() {
            var canvas = document.getElementById(&#39;diagonal&#39;);
            var context = canvas.getContext(&#39;2d&#39;);

            // 保存当前绘图状态
            context.save();

            //向右下方移动绘图上下文
            context.translate(70, 140);

            //以原点为起点，绘制与前面相同的线段
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(70, -70);
            context.stroke();

            // 恢复原有的绘图状态
            context.restore();
        }

        window.addEventListener("load", drawDiagonal, true);
  </script>
</html>

Nach dem Login kopieren

Das Obige ist die HTML5 4__Canvas-API: Kurvenzeichnungs- und Transformationsinhalte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).