html5 Canvas-FillRect（）错误绘制矩形 [英] html5 Canvas - FillRect() incorrectly draws the rectangle
问题描述
我正在使用此栏构建24小时周期的可视化。
从左侧的午夜开始，在右侧的午夜结束。
I'm building a visualization of a 24 hour period with this bar. It starts at midnight on the left, and ends at midnight on the right.
画布宽度为1440 = 24小时* 60分钟=每分钟1像素
The canvas width is 1440 = 24hrs * 60 minutes = 1 pixel per minute.
首先，我用黄色填充整个画布，以表示白天。
接下来，我在开始处添加4个小时&最后，表示夜间。
这部分工作正常。
First, I fill the whole canvas with yellow, to signify daytime. Next, I add 4 hours at the beginning & end, to signify night time. That part works fine.
接下来，我试图添加一个持续4分钟的蓝色事件。
Next, I am trying to add an event that lasts 4 minutes, in blue. It should be a very small sliver, but it's huge.
我在做什么错？？
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>
推荐答案
查看 fillRect（） 的文档
fillRect(x, y, width, height)
您应该使用4而不是544
You should use 4 instead of 544
ctx.fillRect(540, 0, 4, 60);
这篇关于html5 Canvas-FillRect（）错误绘制矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
