為什么把加粗這一行寫到ctx.fill()后面會造成顏色的順序后移，我懂第一個三角形由于代碼順序會沒有顏色值但后面的不清楚。。
<!DOCTYPE html>
<html>
<head>
?? ?<meta charset="UTF-8">
?? ?<title>七巧板</title>
</head>
<body>
<canvas id="canvas" width="400" height="400" ></canvas>
<script>
var canvas = document.getElementById('canvas');
var tangram = [{p:[{x:0,y:0},{x:200,y:200},{x:400,y:0}],color:"#ffff00"},?? ?//黃
?? ??? ??? ??? {p:[{x:0,y:0},{x:200,y:200},{x:0,y:400}],color:"#ffc0cb"},?? ?//淺紫色
?? ??? ??? ??? {p:[{x:300,y:100},{x:200,y:200},{x:300,y:300}],color:"#0000ff"},?? ?//藍色
?? ??? ??? ??? {p:[{x:300,y:100},{x:400,y:0},{x:400,y:200},{x:300,y:300}],color:"#800080"},?? ?//紫色
?? ??? ??? ??? {p:[{x:200,y:200},{x:100,y:300},{x:200,y:400},{x:300,y:300}],color:"#ff0000"},?? ?//紅色
?? ??? ??? ??? {p:[{x:0,y:400},{x:100,y:300},{x:200,y:400}],color:"#008000"},?? ?//綠色
?? ??? ??? ??? {p:[{x:200,y:400},{x:400,y:400},{x:400,y:200}],color:"#add8e6"},?? ?//淡藍色
]
function draw(ctx,attr){
?? ?ctx.beginPath();
?? ?ctx.moveTo(attr.p[0].x,attr.p[0].y);
?? ?for(var i=1;i<attr.p.length;i++){
?? ??? ?ctx.lineTo(attr.p[i].x,attr.p[i].y);
?? ?}
?? ?ctx.fillStyle = attr.color;
?? ?ctx.fill();
?? ?ctx.closePath();
}
window.onload = function(){
?? ?var canvas = document.getElementById('canvas');
?? ?var context = canvas.getContext('2d');
?? ?for(var i=0;i<tangram.length;i++){
?? ??? ?draw(context,tangram[i]);
?? ?}
}
</script>
</body>
</html>
2016-11-02
我們如果把函數按照數組循環完調用draw()i次后 代碼相當于下面
? ?moveTo(0,0)
? ?lineTo(200,200)
? ?lineTo(400,0)
? ?fill();//第一次畫完沒有顏色
? /* fillStyle("arr[0].color")//重點看這里,這是第二個圖形的軌跡,這里的fillstyle取得是第一個里面的顏色 fillstyle可以寫在moveTo的前面是所以顏色后移
? ?moveTo(0,0)
? ?lineTo(200,200)
? ?lineTo(0,400)
? ?fill();*/
? ?/*fillStyle("arr[1].color")
? ?moveTo(0,0)
? ?lineTo(200,200)
? ?lineTo(400,0)
? ?fill();*/
? ?fillStyle("arr[2].color")
? ? ? ?
..........