话不多说，放源码吧。
1 window.onload = function() { 2 var tangram = [ 3 {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"}, 4 {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"}, 5 {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"}, 6 {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"}, 7 {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a54c09"}, 8 {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ccc"}, 9 {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"} 10 ]; 11 var canvas = document.querySelector("canvas"); //获取canvas元素 12 var context = canvas.getContext("2d"); //获取绘图上下文环境 13 for (var i = 0; i < tangram.length; i++) { 14 draw(context, tangram[i]); 15 }; 16 function draw (ctxt,piece) { 17 ctxt.beginPath(); //开始路径 18 ctxt.moveTo(piece.p[0].x, piece.p[0].y); //canvas画笔移动到目标点 19 for (var i = 1; i < piece.p.length; i++) { 20 ctxt.lineTo(piece.p[i].x,piece.p[i].y); //canvas画笔依次绘制路径点 21 }; 22 ctxt.closePath(); //闭合路径 23 ctxt.fillStyle = piece.color; //填充颜色 24 ctxt.stroke(); 25 ctxt.fill(); //图形的填充 26 } 27 };
line2-10 是用对象储存了每次绘制的起始坐标点，和填充颜色。
然后利用for循环来根据所给的坐标绘制图形。
canvas绘制图形的时候不仅要在javascript中获取canvas标签，还需要获取canvas的绘图上下文环境，见line11-12.
canvas绘制时需要把绘制的坐标状态用beginPath()和closePath()包裹起来，当一个画布的环境第一次创建，beginPath() 方法会被显式地调用。
beginPath() 丢弃任何当前定义的路径并且开始一条新的路径。
坐标状态设置完成之后我们需要设置绘制状态，例如线的宽和颜色，图形的填充色等，我们这里绘制七巧板只需要设置填充色，见line23。
在坐标状态和绘制状态设置完成后，我们再进行绘制，连线和填色，见line24-25。
而整个七巧板我们需要绘制七次，所以我们将这个函数封装起来，利用for循环遍历来绘制七巧板。
这个绘制只用到了canvas最基础的一些方法,绘制得到的图形如下：
我们可以修改对象的颜色属性修改颜色。至此，我们就将七巧板利用canvas绘制出来了。