canvas 画七巧板

慕课网看到的，只是自己敲了一遍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>

</head>
<body>
  <canvas id="canvas" style="border:1px solid #ccc;display:block;">
    当前浏览器不支持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:'#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'}
  ];

  window.onload = function () {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    canvas.width = 800;
    canvas.height = 800;

    for (var i = 0; i < tangram.length; i++)
      draw( tangram[i], context);
  }

  function draw(price, cxt) {
    cxt.beginPath();
    cxt.moveTo(price.p[0].x, price.p[0].y);
    for (var i = 1; i < price.p.length; i++)
      cxt.lineTo(price.p[i].x, price.p[i].y);
    cxt.closePath();

    cxt.fillStyle = price.color;
    cxt.fill();
  }
</script>
</body>
</html>
如下图所示：
高否？富否？帅否？否？滚去学习！