Ankündigung

Einklappen
Keine Ankündigung bisher.

Erste Experimente mit Canvas und schon Probleme :)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Erste Experimente mit Canvas und schon Probleme :)

    Hi Leute,

    manchmal frag ich mich, was man am nachbauen trivialer Beispiele falsch machen kann. Jedenfalls hab ich folgendes Probiert:

    HTML-Code:
      <!DOCTYPE html> <html lang="de"> <head>     <meta charset="UTF-8">     <title>Bitcoin-Charts</title>     <link rel="stylesheet" href="css/std.css">     <script src="js/jquery/jquery-3.3.1.min.js"></script>     <script src="js/chart.js"></script> </head> <body>     <div class="box">         <canvas id="canvas_chart" height="600" width="1000"></canvas>     </div> </body>  </html>
    PHP-Code:
      $(document).ready(function () {        var ce document.getElementById"canvas_chart" );     var ce.getContext"2d" );      cx ce.width;     cy ce.height;     cxm Math.roundcx );     cym Math.roundcy );      c.strokeStyle 'yellow';      c.moveTocym );     c.lineTocx cym );     c.stroke();      c.strokeStyle 'red';     c.moveTocym 11 );     c.lineTocx cym 11 );     c.stroke();      c.strokeStyle 'blue';     c.moveTo);     c.lineTo1000 600 );     c.stroke();   }); 
    Das Ergebnis ist eine Katastrophe, weil die Auflösung der Strichstärke min doppelt so groß ist als die Bildauflösung.
    Ich hab dann alles mal mit anderen Anwendungen verglichen wo Canvas zum Einsatz kommt und kann meinen Fehler nicht finden.
    c.lineWidth = 1; ... in allen Kombinationen hat leider auch keinen dünnen Strich gezaubert.
    Hat jemand eine Idee was hier der Fehler ist?

    bitcoin.de <- Meine Freelancerwährung

  • #2
    https://jsfiddle.net/58zhjb7p/3/

    Wie dünn sollen die Striche den noch werden ? Ich glaube dünner geht doch fast gar nicht ? Oder doch?
    Ich mach keine Rechtschreibfehler - ich schreib Freestyle!
    Erreichbar in mein Javascript-Forum und in Facebook-Chat

    Kommentar


    • #3
      Schau dir mal hier das Beispiel zu lineWidth an: https://developer.mozilla.org/de/doc...rs#Line_styles

      Du musst deine horizontalen und vertikalen Linien um 0.5 Pixel versetzt zeichnen.

      Oder du nimmst lineWidth = 2 als dünnste Linie und arbeitest damit.

      Grüße.

      Kommentar

      Lädt...
      X