HTML5-Canvas-Hub () dick und Fuzzy

Question

Ich versuche, den Benutzer zu ermöglichen, ein Rechteck auf der Leinwand zu zeichnen (wie ein Auswahlfeld). Ich bin immer ein paar lächerlichen Ergebnisse, aber dann bemerkte ich, dass auch nur versucht, den Code von meiner Referenz hier , ich bekomme große Fuzzy-Linien und weiß nicht, warum.

ist es gehostet unter dylanstestserver.com/drawcss . die Javascript ist inline, so dass Sie es heraus überprüfen können. Ich bin mit jQuery Koordinaten immer die Maus zu vereinfachen.

Answer 1

Aus irgendeinem Grund ist Ihre Leinwand gespannt. Weil Sie seine CSS-Eigenschaft width auf 100% gesetzt haben, wird es aus einer Art von nativem Größe Stretching. Es ist der Unterschied zwischen der CSS width Eigenschaft verwenden und das width Attribut auf dem <canvas>-Tag. Sie könnten mit ein wenig Javascript, um zu versuchen, wollen sie das Ansichtsfenster machen füllen ( sehen jQuery .width () ):

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

Answer 2

Das verschwommene Problem wird passieren, wenn Sie CSS verwenden, um die Leinwand Höhe einstellen und Breite statt Einstellung Höhe und Breite im Canvas-Elemente.

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

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

Answer 3

So wie ich es tue, ist das Canvas-Element zu einer Breite und Höhe in der CSS zu setzen, und dann die canvas.width gesetzt = canvas.clientWidth und canvas.height = canvas.clientHeight

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

Answer 4

Sie haben nicht Leinwandgröße in Pixel angegeben, so dass es nach oben skaliert wird. Es ist 300x150 hier. Versuchen Sie, die Breite einstellen, Höhe

Answer 5

Auf Retina-Displays auch maßstab muß (zusätzlich zu der akzeptierten Antwort):

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

Answer 6

Das Thema CSS Sizing in diesen Kommentaren erwähnt ist richtig, aber eine andere subtilere Sache, die verschwommene Linien verursachen kann, ist zu vergessen, um einen Anruf zu context.beginPath() machen aufrufen, bevor eine Linie zu zeichnen. Ohne diesen Aufruf, werden Sie noch eine Linie bekommen, aber es wird nicht geglättet werden, die die Linie sieht aus wie eine Reihe von Schritten macht.

Answer 7

fand ich den Grund meines war verschwommen war, dass es eine leichte Diskrepanz zwischen der Inline-Breite und der CSS Breite war.

Ich habe beide Inline-Breite / Höhe Parameter und CSS Breite / Höhe meine Leinwand zugewiesen, weil ich brauche seine physikalischen Dimensionen statisch zu halten, während die Inline-Dimensionen für Retina-Bildschirme zu erhöhen.

Überprüfen Sie Ihr sind die gleichen, wenn Sie eine Situation wie bei mir haben.