Heim > Artikel > Web-Frontend > Beispielcode für die gemeinsame Nutzung grundlegender Funktionen von HTML5 Canvas

Beispielcode für die gemeinsame Nutzung grundlegender Funktionen von HTML5 Canvas

黄舟Original: 2017-03-28 15:53:071565Durchsuche

Leinwand Die grundlegenden -Attribute und Methoden: width, height, getContext() usw.;

übergibt width und height zum Abrufen und Festlegen der Breite und Höhe der aktuellen Leinwand;

Abrufen der Zeichenumgebung (Kontext) der aktuellen Leinwand über die Methode getContext();

context=canvas.getContext("2d");

context enthält alle Methoden und Attribute, die wir zum Zeichnen auf Leinwand benötigen; im kartesischen Koordinatensystem von

context , die Leinwand Die obere linke Ecke ist der Ursprung; vom Ursprung nach rechts ist die positive Richtung der Die Methoden werden alle in Kombination mit

aktueller

Zustand

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>s3</title>
        <script type="text/javascript" src="../script/modernizr-latest.js"></script>
        <script type="text/javascript">
            window.addEventListener("load", eventWindowLoaded, false);
            var Debugger = function() {
            };
            Debugger.log = function(message) {
                try {
                    console.log(message);
                } catch (exception) {
                    return;
                }
            }
            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasSupport() {
                return Modernizr.canvas;
            }

            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasApp() {

                if(!canvasSupport()) {
                    return;
                }
                var theCanvas = document.getElementById("canvasOne");
                var context = theCanvas.getContext("2d");

                function drawScreen() {
                    //以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html>
for(var x = 0.5; x < 550; x += 10) {
                        context.moveTo(x, 0);
                        context.lineTo(x, 400);
                    }
                    for(var y = 0.5; y < 400; y += 10) {
                        context.moveTo(0, y);
                        context.lineTo(550, y);
                    }
                    context.strokeStyle = "#cecece";
                    context.stroke();
                    context.beginPath();
                    context.moveTo(50, 150);
                    context.lineTo(300, 150);
                    context.moveTo(250, 100);
                    context.lineTo(300, 150);
                    context.moveTo(300, 50);
                    context.lineTo(250, 100);
                    context.moveTo(450, 200);
                    context.lineTo(300, 50);
                    /*symmetry*/
                    context.moveTo(50, 250);
                    context.lineTo(300, 250);
                    context.moveTo(250, 300);
                    context.lineTo(300, 250);
                    context.moveTo(300, 350);
                    context.lineTo(250, 300);
                    context.moveTo(450, 200);
                    context.lineTo(300, 350);
                    /*end*/
                    context.moveTo(50, 150);
                    context.lineTo(50, 250);
                    /*write coordinate*/
                    context.font = "bold 12px sans-serif";
                    context.fillText("( 0 , 0 )", 8, 5);
                    context.fillText("(50, 150)", 58, 155);
                    context.fillText("(300, 150)", 308, 155);
                    context.fillText("(250, 100)", 258, 105);
                    context.fillText("(300, 150)", 308, 155);
                    context.fillText("(300, 50)", 308, 55);
                    context.fillText("(50, 250)", 58, 255);
                    context.fillText("(300, 250)", 308, 255);
                    context.fillText("(250, 350)", 258, 355);
                    context.fillText("(450, 200)", 458, 205);
                    context.strokeStyle = "#f00";
                    context.stroke();

                }
                drawScreen();
            }
        </script>
    </head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px;">
            <canvas id="canvasOne" width="550" height="400">
                Your browser does not support HTML5 Canvas.
            </canvas>
        </div>
    </body>
</html>

verwendet 🎜> Bevor wir wirklich verstehen, wie Canvas funktioniert, ist der aktuelle Status ein Konzept, das beherrscht werden muss.

Der aktuelle Status ist eigentlich ein Stapel von Zeichnungszuständen, der global für die gesamte Leinwand gilt. Wir können die folgenden Zustände bedienen:

Transformationsmatrix (Transformationsmatrix)

Clipping-Bereich (Bereichsausschnitt)

Methode:clip()

Methods:scale, rotate, transform, and translate

Eigenschaften des Kontexts (Kontextattribut)

Werfen wir zunächst einen kurzen Blick darauf Analysieren Sie langsam die Verwendung dieser Eigenschaften und Methoden in zukünftigen Artikeln;

Ein kleines Programm (Buchstaben erraten), geschrieben von [oreilly] im Ausland:

Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY,
shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.

Das obige ist der detaillierte Inhalt vonBeispielcode für die gemeinsame Nutzung grundlegender Funktionen von HTML5 Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Beispielcode, der das Rendern von Text in Html5 Canvas unterstützt (Bild)Nächster Artikel：Beispielcode, der das Rendern von Text in Html5 Canvas unterstützt (Bild)

In Verbindung stehende Artikel

Mehr sehen