Leinwand Zeichnungen, wie Linien, unscharf sind

Ich habe eine <div style="border:1px solid border;" /> und Leinwand, die gezeichnet wird mit:

context.lineWidth = 1;
context.strokeStyle = "gray";

Die Zeichnung sieht ziemlich verschwommen (Linienbreite weniger als man schafft sogar noch schlimmer Bild), und nichts in der Nähe der div-Grenze. Ist es möglich, die gleiche Qualität der Zeichnung als HTML mit canvas?

JS:

var ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 1;
ctx.moveTo(2, 2);
ctx.lineTo(98, 2);
ctx.lineTo(98, 98);
ctx.lineTo(2, 98);
ctx.lineTo(2, 2);
ctx.stroke();

CSS:

div {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
canvas, div {background-color: #F5F5F5;}
canvas {border: 1px solid white;display: block;}

HTML:

<table>
<tr><td>Line on canvas:</td><td>1px border:</td></tr>
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr>
</table>

  • Lösen Sie die bildunschärfe canvas ich entwickle ein js-framework js2dx.com. Es komponiert Leinwand Bild von DIV Mosaiken, das Ergebnis ist eine schärfere Darstellung bei Kosten, die in Bezug auf die cpu - /Speicher.
InformationsquelleAutor | 2012-01-02
Schreibe einen Kommentar