Beispielcode für die gemeinsame Nutzung grundlegender Funktionen von HTML5 Canvas-H5-Tutorial-php.cn

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

黄舟

Freigeben： 2017-03-28 15:53:07

Original

1598 Leute haben es durchsucht

html5 Leinwand Einführung

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

Nach dem Login kopieren

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!