話不多說，放源碼吧。
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繪制出來了。