Question

我正在使用此栏构建24小时的可视化。它从左边的午夜开始，到右边的午夜结束。

画布宽度为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>

Answer 1

查看docs for fillRect()

fillRect(x, y, width, height)

您应该使用4而不是544

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

html5 Canvas - FillRect（）错误地绘制矩形

1 个答案: