html5 Canvas - FillRect()가 사각형을 잘못 그립니다.

저는이 막대로 24 시간의 시각화를 작성하고 있습니다. 왼쪽 자정부터 시작하여 오른쪽 자정에 끝납니다.html5 Canvas - 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 Canvas - FillRect()가 사각형을 잘못 그립니다.

답변

관련 문제