Wie man mit Leinwand ein buntes Tangram zeichnet-H5-Tutorial-php.cn

Wie man mit Leinwand ein buntes Tangram zeichnet

php中世界最好的语言

Freigeben： 2018-03-14 09:41:37

Original

2694 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie mit Leinwand ein buntes Tangram zeichnen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Leinwand zum Zeichnen eines bunten Tangrams?

HTML-Code

<!DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Canvas绘制七巧板</title>
</head>
    <body>
        <style>
            #canvas{        border: 1px solid #aaa;        text-align: center;}
        </style>
        <canvas id="canvas" width="800" height="800">
            当用户浏览器不支持Canvas,请更换浏览器重试！
        </canvas>
    </body>
</html>

Nach dem Login kopieren

JS-Code lautet wie folgt:

var 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: "#a594c0"},
    {p: [{x: 200, y: 600}, {x: 400, y: 800}, {x: 0, y: 800}], color: "#fa8ecc"},
    {p: [{x: 800, y: 400}, {x: 800, y: 800}, {x: 400, y: 800}], color: "#f6ca29"}
];//七巧板的七块图形，p为各顶点坐标，color为颜色window.onload = function () {    var canvas = document.getElementById("canvas");    if (canvas.getContext("2d")) {//判断浏览器是否支持canvas
        var context = canvas.getContext("2d");        for (var i = 0; i < tangram.length; i++) {
            draw(tangram[i], context);
        }        function draw(piece, cxt) {
            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();
            cxt.strokeStyle = "black";
            cxt.lineWidth = 5;
            cxt.stroke();
        }
    } else {
        alert("不支持canvas,请更换浏览器！")
    }
};

Nach dem Login kopieren

Wie man mit Leinwand ein buntes Tangram zeichnet

Ich glaube, Sie haben es nach dem Lesen gemeistert Fall in diesem Artikel Methode, für weitere spannende Informationen achten Sie bitte auf die chinesische PHP-Website andere verwandte Artikel!

Empfohlene Lektüre:

Dezimalproblem mit Eingabetyp=Zahl

So verwenden Sie select, um den ausgewählten Wert zu erhalten

Das obige ist der detaillierte Inhalt vonWie man mit Leinwand ein buntes Tangram zeichnet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!