感覺代碼沒錯啊 ，為何只是顯示邊框，沒有畫出內容？？？
<!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>
2016-04-28
? ? ? cxt.closePath();
? ? ? ? ? ? cxt.fillStyle=piece.color;
? ? ? ? ? ? cxt.fill();
放在循環外