html5 Canvas - FillRect() zeichnet das Rechteck falsch

Ich baue eine Visualisierung eines 24-Stunden-Zeitraums mit dieser Leiste. Es beginnt um Mitternacht auf der linken Seite und endet um Mitternacht auf der rechten Seite.html5 Canvas - FillRect() zeichnet das Rechteck falsch

Die Leinwand Breite ist 1440 = 24 Stunden * 60 Minuten = 1 Pixel pro Minute.

Zuerst fülle ich die gesamte Leinwand mit gelb, um tagsüber zu signalisieren. Als nächstes füge ich 4 Stunden am Anfang & Ende hinzu, um Nachtzeit zu bedeuten. Dieser Teil funktioniert gut.

Als nächstes versuche ich ein Ereignis hinzuzufügen, das 4 Minuten dauert, in blau. Es sollte ein sehr kleiner Splitter sein, aber es ist riesig.

Was mache ich falsch ???

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>

Quelle

2017-05-03 Debbie V

Überprüfen Sie die docs for fillRect()

fillRect(x, y, width, height)

Sie sollten 4 anstelle von 544

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

Quelle

2017-05-03 22:46:37 jessegavin

Dank aus, die funktioniert! –

html5 Canvas - FillRect() zeichnet das Rechteck falsch

Antwort

Verwandte Themen