Exemple de partage de code des fonctionnalités de base de HTML5 Canvas-Tutoriel H5-php.cn

Exemple de partage de code des fonctionnalités de base de HTML5 Canvas

黄舟

Libérer： 2017-03-28 15:53:07

original

1564 Les gens l'ont consulté

html5 ToileIntroduction

toile Les attributs et méthodes de base : width, height, getContext(), etc.

passe width et height pour obtenir et définir la largeur et la hauteur du canevas actuel ;

obtenir l'environnement de dessin (contexte) du canevas actuel via la méthode getContext() ;

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

le contexte contient toutes les méthodes et attributs dont nous avons besoin pour dessiner sur le canevas ; dans le système de coordonnées cartésiennes du

contexte , le canevas Le coin supérieur gauche est l'origine ; de l'origine vers la droite est la direction positive du Les méthodes sont toutes utilisées en conjonction avec

état actuel

<!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>

Copier après la connexion

; 🎜> Avant de vraiment comprendre comment fonctionne Canvas, l'état actuel est un concept qui doit être maîtrisé

l'état actuel est en fait une pile d'états de dessin, qui s'applique à l'ensemble du canevas dans son ensemble ; On peut opérer les états suivants :

Matrice de transformation (Matrice de transformation)

Région de découpage (découpage de région)

Method:clip()

Methods:scale, rotate, transform, and translate

Copier après la connexion

Propriétés du contexte (attribut de contexte)

Jetons-y un bref coup d'œil, et nous le ferons analyser lentement l'utilisation de ces propriétés et méthodes dans les prochains articles ;

Un petit programme (deviner des lettres) écrit par [oreilly] à l'étranger :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!