html5畫布 - FillRect（）不正確繪製矩形

我正在用此欄建立24小時期間的可視化效果。它從左側午夜開始，在右側午夜結束。html5畫布 - FillRect（）不正確繪製矩形

畫布寬度爲1440 = 24小時* 60分鐘= 1像素每分鐘。

首先，我用黃色填充整個畫布，以表示白天。接下來，我在開始時加入4小時&結束，以表示夜間時間。這部分工作正常。

接下來，我試圖添加一個持續4分鐘的事件，藍色。它應該是一個非常小的棉條，但它很大。

我在做什麼錯？

<html> 
<canvas id="myCanvas" 
    width="1440" height="60" 
    class="img-responsive" 
    style="border:1px solid #000000;"></canvas> 

<script> 
    var canvas = document.getElementById("myCanvas"); 
    var ctx = canvas.getContext("2d"); 

    ctx.fillStyle = "yellow"; 
    ctx.fillRect(0,0,1440,60); 

    ctx.fillStyle = "#eeeeee"; 
    ctx.fillRect(0,0,240,60); 
    ctx.fillRect(1200,0,1440,60); 

    ctx.fillStyle = "blue"; 
    ctx.fillRect(540,0,544,60); 

</script> 
</html>

來源

2017-05-03 Debbie V

退房的docs for fillRect()

fillRect(x, y, width, height)

您應該使用4，而不是544

ctx.fillRect(540, 0, 4, 60);

來源

2017-05-03 22:46:37 jessegavin

奏效謝謝！ –

html5畫布 - FillRect（）不正確繪製矩形

回答

相關問題