为了账号安全,请及时绑定邮箱和手机立即绑定

感觉代码没错啊 ,为何只是显示边框,没有画出内容???

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

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

<script>

    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:"caff67"},

        {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"caff67"},

        {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:0,y:800}],color:"caff67"},

        {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"caff67"},

        {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"caff67"}

    ]

    window.onload=function(){

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


        canvas.width=800;

        canvas.height=800;

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

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

            darw(tangram[i],context);

        }

    }

    function darw(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();

        }

    }

</script>

</body>


</html>


正在回答

1 回答

      cxt.closePath();

            cxt.fillStyle=piece.color;

            cxt.fill();

放在循环外

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

感觉代码没错啊 ,为何只是显示边框,没有画出内容???

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信