Maison >interface Web >js tutoriel >Utilisez le canevas HTML5 pour dessiner un tangram

Utilisez le canevas HTML5 pour dessiner un tangram

一个新手original: 2017-10-13 09:34:591758parcourir

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le canevas HTML5 crée un tas de boules colorées qui disparaissent lorsque la souris bougeArticle suivant：Le canevas HTML5 crée un tas de boules colorées qui disparaissent lorsque la souris bouge

Articles Liés

Voir plus