我正在用这个栏构建 24 小时周期的可视化。它从左边的午夜开始，到右边的午夜结束。
画布宽度为 1440 = 24 小时 * 60 分钟 = 每分钟 1 像素。
首先，我用黄色填充整个画布，以表示白天。接下来，我在开始和结束处添加 4 小时，以表示夜间。那部分工作正常。
接下来，我尝试添加一个持续 4 分钟的蓝色事件。它应该是一个很小的条子，但它很大。
我究竟做错了什么？？？
https://jsfiddle.net/zuehejjm/
<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>