                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /炫丽的倒计时效果Canvas绘图与动画基础

大家帮我看下，为什么我的七巧板少了一个黄色的三角？

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>canvas绘制七巧板</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <canvas id="canvas" style="border: 1px solid #aaaa;display: block;margin: 50px auto;">
            当前浏览器不支持canvas，请更换浏览器后再试
        </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:"#ef3d61"},
                {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f951a"},
                {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"},
            ]
            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 ++ )
                    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();
                
                
            }
        </script>
    </body>
</html>