HTML5-Canvas-Strich () dick und unscharf

Ich versuche, um dem Benutzer zu ermöglichen, ziehen Sie ein Rechteck auf der Leinwand (wie eine Auswahl-box). Ich bin immer etwas lächerlich, dann aber bemerkte ich, dass schon versucht einfach den code aus meinem Hinweis hier, bekomme ich riesige Linien unscharf und weiß nicht warum.

gehostet wird, die auf dylanstestserver.com/drawcss. die javascript inline, so können Sie check it out. Ich bin mit Hilfe von jQuery zur Vereinfachung immer die Koordinaten der Maus.

Kommentar zu dem Problem - Öffnen
Der Titel dieser Frage macht meine Gedanken gehen seltsame Orte Kommentarautor: Sam Dufel
der link ist tot. Kommentarautor: Hermann Ingjaldsson
Ich war auch immer dick und verschwommen Ausgabe , die ich war, wenn Sie die Breite und Höhe in % oder vw oder vh. Durch die Einstellung der direkten px Breite und Höhe, arbeitete in meinem Fall. Kommentarautor: Sarju

InformationsquelleAutor der Frage Nona Urbiz | 2010-10-21

  1. 34

    Aus irgendeinem Grund, Ihr die Leinwand gespannt ist. Weil Sie die css-Eigenschaft width eingestellt 100% es ist stretching es aus, irgendeine Art von nativen Größe. Es ist der Unterschied zwischen der Verwendung der css - width - Eigenschaft und die width - Attribut auf die <canvas> tag. Möchten Sie vielleicht versuchen, mit ein bisschen javascript zu machen, es füllt den viewport (siehe jQuery .Breite()):

    jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...

    InformationsquelleAutor der Antwort clarkf

  2. 55

    Unscharf problem wird passieren, wenn Sie css verwenden, um die Leinwand Höhe und Breite anstatt Höhe und Breite in das canvas-element. 

    <style>
  canvas { height: 800px; width: 1200px; }      WRONG WAY -- BLURRY LINES
</style>

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES

    InformationsquelleAutor der Antwort DougLeary

  3. 8

    Die Art, wie ich es tun ist, um das canvas-element eine Breite und Höhe in der css, und legen Sie dann die Leinwand.Breite = canvas.clientWidth und Leinwand.Höhe = Leinwand.clientHeight

    var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");

    InformationsquelleAutor der Antwort miller the gorilla

  4. 3

    Haben Sie nicht angegeben Größe des Grafikbereichs (in Pixeln, so dass es skaliert werden kann. Es ist 300x150 hier. Versuchen Sie, die Breite, Höhe

    InformationsquelleAutor der Antwort artificialidiot

  5. 3

    Auf retina-displays, die Sie auch skalieren müssen (zusätzlich zu den akzeptierten Antworten):

    var context = canvas.getContext('2d');
context.scale(2,2);

    InformationsquelleAutor der Antwort laktak

  6. 2

    Css-sizing Problem erwähnt, in diesen Kommentaren ist richtig, aber eine subtilere Sache, dass kann dazu führen, verschwommene Linien vergessen zu nennen, machen einen Aufruf an context.beginPath() vor dem zeichnen einer Linie. Ohne diese aufrufen, erhalten Sie noch eine Linie, aber es wird nicht geglättet, das macht die Linie sieht aus wie eine Reihe von Schritten.

    InformationsquelleAutor der Antwort Scott Antipa

  7. 0

    Hab ich den Grund gefunden, mir war verschwommen war, dass es eine leichte Diskrepanz zwischen den inline-Breite und die CSS-Breite.

    Habe ich die inline-Breite/Höhe-Parameter UND css Breite/Höhe zugewiesen meiner Leinwand, weil ich brauche, um seine physischen Dimensionen statisch, bei gleichzeitiger Erhöhung der inline-Abmessungen für retina-Bildschirme.

    Überprüfen Sie, Ihnen sind die gleichen, wenn Sie eine situation wie die meine.

    InformationsquelleAutor der Antwort Fijjit

Schreibe einen Kommentar