Heim > Artikel > Web-Frontend > Wie man mit Leinwand ein buntes Tangram zeichnet

Wie man mit Leinwand ein buntes Tangram zeichnet

php中世界最好的语言Original: 2018-03-14 09:41:372632Durchsuche

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>

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,请更换浏览器！")
    }
};

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie H5-Leinwand, um einen Sperreffekt zu erzielenNächster Artikel：Verwenden Sie H5-Leinwand, um einen Sperreffekt zu erzielen

In Verbindung stehende Artikel

Mehr sehen