Verwenden Sie HTML5-Canvas, um ein Tangram zu zeichnen-js-Tutorial-php.cn

Verwenden Sie HTML5-Canvas, um ein Tangram zu zeichnen

一个新手

Freigeben： 2017-10-13 09:34:59

Original

1736 Leute haben es durchsucht

Wie sieht das Tangram aus?

Verwenden Sie Canvas, um ihn zu zeichnen. Tatsächlich geht es darum, die Koordinaten jedes Punktes in den Grafiken dieser 7 Bereiche zu finden und sie dann mit moveTo und lineTo zu verbinden Linien mit unterschiedlichen Farben.

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

Nach dem Login kopieren

Tangram speichert die Scheitelpunktkoordinaten und die Füllfarbe jeder Form. p ist ein Array, das aus den Scheitelpunkten jedes Bereichs besteht Die Objektspeicherung besteht aus 7 Formen, das Tangram besteht aus 7 Elementen und verbindet dann die Eckpunkte jedes Bereichs mit anderen Punkten durch Linien. Beachten Sie, dass die Punkte in jedem Bereich Pfade verwenden müssen. Sie können auf diesen Artikel von mir verweisen: [JS Master’s Road] Tutorials zur HTML5-Canvas-Serie – Detaillierte Erklärung des Startpfads beginPath und des Schließpfads closePath

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML5-Canvas, um ein Tangram zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!