Use html5 canvas to draw a tangram-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Use html5 canvas to draw a tangram

一个新手

Oct 13, 2017 am 09:34 AM

canvas html5

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>

Copy after login

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 of this Website

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