Ankündigung

Einklappen
Keine Ankündigung bisher.

Erste Experimente mit Canvas und schon Probleme :)

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?

    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