Utilisez le canevas HTML5 pour dessiner un tangram-js tutoriel-php.cn

Utilisez le canevas HTML5 pour dessiner un tangram

一个新手

Libérer： 2017-10-13 09:34:59

original

1737 Les gens l'ont consulté

A quoi ressemble le tangram ?

Utiliser Canvas pour le dessiner. En fait, il s'agit de trouver les coordonnées de chaque point dans le graphique de ces 7 zones, puis d'utiliser moveTo et lineTo pour relier les. lignes avec des paramètres de couleur différents.

<head>
    <meta charset=&#39;utf-8&#39; />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(&#39;2d&#39;),
                width = oCanvas.width, height = oCanvas.height,
                tangram = [
                { p: [{ x: 0, y: 0 }, { x: 800, y: 0 }, { x: 400, y: 400 }], color: "#caff67" }, //正上方绿色三角形区域
                { p: [{ x: 0, y: 0 }, { x: 400, y: 400 }, { x: 0, y: 800 }], color: "#67becf" }, //左方蓝色三角形区域
                { p: [{ x: 800, y: 0 }, { x: 800, y: 400 }, { x: 600, y: 600 }, { x: 600, y: 200 }], color: "#ef3d61" },
                { p: [{ x: 600, y: 200 }, { x: 600, y: 600 }, { x: 400, y: 400 }], color: "#f9f51a" },
                { p: [{ x: 400, y: 400 }, { x: 600, y: 600 }, { x: 400, y: 800 }, { x: 200, y: 600 }], color: "#a54c09" },
                { p: [{ x: 200, y: 600 }, { x: 400, y: 800 }, { x: 0, y: 800 }], color: "#fa8ccc" },
                { p: [{ x: 800, y: 400 }, { x: 800, y: 800 }, { x: 400, y: 800 }], color: "#f6ca29" }
            ];
            for (var i = 0; i < tangram.length; i++) {
                draw( oGc, tangram[i]);
            };
            function draw( cxt, piece ) {
                cxt.beginPath();
                cxt.moveTo(piece.p[0].x, piece.p[0].y);
                for (var i = 1; i < piece.p.length; i++) {
                    cxt.lineTo(piece.p[i].x, piece.p[i].y);
                }
                cxt.closePath();

                cxt.fillStyle = piece.color;
                cxt.fill();
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="800" height="800"></canvas>
</body>

Copier après la connexion

tangram stocke les coordonnées des sommets et la couleur de remplissage de chaque forme p est un tableau composé des sommets de chaque zone. Stockage d'objets. L'un a 7 formes, le tangram est composé de 7 éléments, puis utilise une boucle pour relier les sommets de chaque zone avec d'autres points avec des lignes. Notez que les points de chaque zone doivent utiliser des chemins. Pourquoi ? Vous pouvez vous référer à mon article : [JS Master's Road] Tutoriels de la série de toiles HTML5 - Explication détaillée du chemin de début BeginPath et du chemin de fermeture closePath

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!