使用javascript填充路徑

我正在嘗試使用矩形和路徑線爲網頁製作可視化圖形。這一切都已完成，現在我想爲頂部的一種顏色着色，而底部則是另一種顏色。我試圖把整個事情弄成紅色，並用綠色覆蓋底部（我知道這個恐怖的組合，但它們只是用於測試目的）。它使整個事情變成紅色，但我沒有看到任何綠色。所以我的問題是，我怎樣才能在底部不同顏色的頂部？使用javascript填充路徑

</head> 
<body> 
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #D3D3D3;">Your browser does not support the HTML5 canvas tag.     </canvas> 
    <script> 
     var theCanvas=document.getElementById("myCanvas"); 
     var theContext=theCanvas.getContext("2d"); 
     var rectangle=theCanvas.getContext("2d"); 

     var sales = new Array(); 
     sales[0] = 52; 
     sales[1] = 48; 
     sales[2] = 74; 
     sales[3] = 31; 
     sales[4] = 47; 
     sales[5] = 25; 
     sales[6] = 67; 
     sales[7] = 78; 
     sales[8] = 45; 
     sales[9] = 75; 
     sales[10] = 85; 

     var scalar = 10; 
     var width = 10; 
     var height = 10; 
     var spacing = 10 
     var y = height * scalar; 

     rectangle.rect(0, 0, (width * scalar), y); 
     rectangle.fillStyle="red"; 
     rectangle.fill(); 
     rectangle.stroke(); 

     theContext.beginPath(); 
     theContext.moveTo(0, y); 
     theContext.lineTo(0, (y - sales[0])); 
     theContext.stroke(); 
     for(var i = -1; i < sales.length; ++i) 
     { 
      theContext.moveTo((spacing * i), (y - sales[i])); 
      theContext.lineTo(spacing * (i + 1), (y - sales[i + 1])); 
      theContext.stroke(); 
     } 
     theContext.moveTo((width * scalar), (y - sales[10])); 
     theContext.lineTo((width * scalar), y); 
     theContext.stroke(); 
     theContext.moveTo((width * scalar), y); 
     theContext.lineTo(0, y); 
     theContext.stroke(); 
     theContext.moveTo(0, y); 
     theContext.lineTo(0, (y - sales[0])); 
     theContext.closePath(); 
     theContext.fillStyle="green";//doesn't seem to work! 
     theContext.fill(); 
     theContext.stroke(); 
    </script> 
</body>

來源

2014-03-01 Trevor M

，因爲它使用了太多moveTo()的代碼是分手的多邊形。如果你打破了路線，那麼就沒有任何東西可以填充，因爲只剩下不連續的線條。

儘量排除它們是這樣的：

Fiddle

theContext.beginPath(); 
theContext.moveTo(0, y); 
theContext.lineTo(0, (y - sales[0])); 
//theContext.stroke(); 
for(var i = -1; i < sales.length; ++i) 
{ 
    //theContext.moveTo((spacing * i), (y - sales[i])); 
    theContext.lineTo(spacing * (i + 1), (y - sales[i + 1])); 
    //theContext.stroke(); 
} 
//theContext.moveTo((width * scalar), (y - sales[10])); 
theContext.lineTo((width * scalar), y); 
theContext.stroke(); 

//theContext.moveTo((width * scalar), y); 
theContext.lineTo(0, y); 
//theContext.stroke(); 
//theContext.moveTo(0, y); 
theContext.lineTo(0, (y - sales[0])); 
theContext.closePath(); 
theContext.fillStyle="green"; //works! 
theContext.fill(); 
theContext.stroke();

或清理：

theContext.beginPath(); 
theContext.moveTo(0, y); 
theContext.lineTo(0, (y - sales[0])); 

for(var i = -1; i < sales.length; ++i) { 
    theContext.lineTo(spacing * (i + 1), (y - sales[i + 1])); 
} 
theContext.lineTo((width * scalar), y); 
theContext.stroke(); 

theContext.lineTo(0, y); 
theContext.lineTo(0, (y - sales[0])); 
theContext.closePath(); 
theContext.fillStyle="green"; //works! 
theContext.fill(); 
theContext.stroke();

來源

2014-03-01 02:11:51 K3N

謝謝！我沒有意識到它將它分解了，但我認爲它從最後一個繪製點繼續下去更有意義。 –

使用javascript填充路徑

回答

相關問題