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（）不正确绘制矩形

回答

相关问题