Home > Article > Web Front-end > Use html5 canvas to draw a tangram

Use html5 canvas to draw a tangram

一个新手Original: 2017-10-13 09:34:591677browse

What does the tangram look like?

Use canvas to draw it. In fact, it is to find the coordinates of each point in the graphics of these 7 areas, and then use moveTo and lineTo to connect the lines with different settings. color.

<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 stores the vertex coordinates and fill color of each shape. p is an array composed of the vertices of each area. Each point in the array is stored with a json object. ., one has 7 shapes, tangram is 7 items, and then uses a loop to connect the vertices of each area with other points with lines. Note that the points in each area must use paths. Why? You can refer to this article of mine: [JS Master’s Road] HTML5 Canvas Tutorial Series - Detailed explanation of begin path beginPath and close path closePath

The above is the detailed content of Use html5 canvas to draw a tangram. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 canvas creates a bunch of colorful balls that disappear as the mouse movesNext article：HTML5 canvas creates a bunch of colorful balls that disappear as the mouse moves

See more

Use html5 canvas to draw a tangram

Related articles