问什么不能绘制七巧板?

来源:2-2 绘制直线、多边形和七巧板

ACCCG

2015-12-28 21:40

<!DOCTYPE html>

<html>


<head>

    <title>acg</title>

</head>


<body>

    <canvas id="canvas" style="border:5px #aaa solid;display:block;margin:35px auto"></canvas>

</body>

<script>

    window.onload = function() {

        var canvas = document.getElementById("canvas");

        var context = canvas.getContext("2d");

        canvas.width = 800;

        canvas.height = 800;

        if (canvas.getContext("2d")) {

            var cantext = canvas.getContext("2d"); //2d图形

        } else {

            alert("此浏览器不支持canvas,请更换浏览器")


        };



        var aa = [{

            aa: [{

                x: 0,

                y: 0

            }, {

                x: 800,

                y: 0

            }, {

                x: 400,

                y: 400

            }],

            color: "#caff67"

        }, {

            aa: [{

                x: 0,

                y: 0

            }, {

                x: 400,

                y: 400

            }, {

                x: 0,

                y: 800

            }],

            color: "#67becf"

        }, {

            aa: [{

                x: 800,

                y: 0

            }, {

                x: 800,

                y: 400

            }, {

                x: 600,

                y: 600

            }, {

                x: 600,

                y: 200

            }],

            color: "#ef3d61"

        }, {

            aa: [{

                x: 600,

                y: 200

            }, {

                x: 600,

                y: 600

            }, {

                x: 400,

                y: 400

            }],

            color: "f9f51a"

        }, {

            aa: [{

                x: 400,

                y: 400

            }, {

                x: 600,

                y: 600

            }, {

                x: 400,

                y: 800

            }, {

                x: 200,

                y: 600

            }],

            color: "#a594c0"

        }, {

            aa: [{

                x: 200,

                y: 600

            }, {

                x: 400,

                y: 800

            }, {

                x: 0,

                y: 800

            }],

            color: "#fa8ecc"

        }, {

            aa: [{

                x: 800,

                y: 400

            }, {

                x: 800,

                y: 800

            }, {

                x: 400,

                y: 800

            }],

            color: "#f6ca29"

        }]


        for (i = 0; i < aa.length; i++) {

            cc(aa[i], context);

            console.log(i);

        }


        function cc(dd, ee) {

            ee.beginPath();

            ee.moveTo(dd.bb[0].x, dd.bb[0].y);

            for (i = 1; i < dd.bb.length; i++)

                ee.lineTo(dd.bb[i].x, dd.bb[i].x);

            ee.closePath();

            ee.fillStyle = dd.color;

            ee.fill();

            console.log(i);

        }


    }


</script>


</html>


写回答 关注

1回答

  • 李晓健
    2015-12-28 21:57:30
            function cc(dd, ee) {
                ee.beginPath();
    //            ee.moveTo(dd.bb[0].x, dd.bb[0].y);
                ee.moveTo(dd.aa[0].x, dd.aa[0].y);
    //            for (i = 1; i < dd.aa.length; i++){
    //                ee.lineTo(dd.aa[i].x, dd.aa[i].x);
    //            }
                for (y = 1; y < dd.aa.length; y++){
                    ee.lineTo(dd.aa[y].x, dd.aa[y].y);
                }
                ee.closePath();
                ee.fillStyle = dd.color;
                ee.fill();
            }

    看注释

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas,彻底释放自己的创造力

96875 学习 · 1029 问题

查看课程

相似问题