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

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

創(chuàng)新新互聯(lián)，憑借10余年的做網(wǎng)站、網(wǎng)站設(shè)計經(jīng)驗，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計網(wǎng)站有成百上千家案例。做網(wǎng)站建設(shè)，選成都創(chuàng)新互聯(lián)。

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,請更換瀏覽器重試！
        </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為各頂點坐標(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,請更換瀏覽器！")
    }
};

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

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

本文題目：如何用canvas來繪制彩色七巧板
瀏覽地址：http://muchs.cn/article10/pioigo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網(wǎng)站內(nèi)鏈、小程序開發(fā)、標(biāo)簽優(yōu)化、網(wǎng)站排名、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)