如何用canvas來繪制彩色七巧板

發(fā)布時(shí)間：2020-09-29 16:37:56 來源：億速云閱讀：186 作者：小新欄目：web開發(fā)

這篇文章主要介紹了如何用canvas來繪制彩色七巧板，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

HTML代碼

<!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">
            當(dāng)用戶瀏覽器不支持Canvas,請(qǐng)更換瀏覽器重試！
        </canvas>
    </body>
</html>

js代碼如下所示：

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為各頂點(diǎn)坐標(biāo)，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,請(qǐng)更換瀏覽器！")
    }
};

如何用canvas來繪制彩色七巧板

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享如何用canvas來繪制彩色七巧板內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

如何用canvas來繪制彩色七巧板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽