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

あなたが代わりに働いていた544人の

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

出典

2017-05-03 22:46:37 jessegavin

感謝の4を使用する必要がありますdocs for fillRect()

fillRect(x, y, width, height)

をチェック！ –

html5キャンバス - FillRect（）は四角形を間違って描画します

答えて

関連する問題