Les dessins sur toile, comme les lignes, sont flous

Question

Les dessins sur toile, comme les lignes, sont flous

Demandé el 2 de Janvier, 2012: Quand la question a-t-elle été
62236 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai un <div style="border:1px solid border;" /> et le canevas, qui est dessiné en utilisant :

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

Le dessin est assez flou (une largeur de ligne inférieure à un crée une image encore pire), et rien n'est proche de la bordure de la division. Est-il possible d'obtenir la même qualité de dessin que le HTML en utilisant canvas ?

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();

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

<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>

Demandé el 2 de Janvier, 2012 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

100voto

Ben Pretorius Points 1046

J'ai constaté que le fait de définir la taille de la toile en CSS entraînait l'affichage de mes images de manière floue.

Essayez ça :

<canvas id="preview" width="640" height="260"></canvas>

conformément à mon message : HTML Images floues sur toile

Répondu el 25 de Juillet, 2013 par Ben Pretorius (1046 Points )

Answer 3

66voto

Matt Greer Points 29401

Lorsque vous dessinez des lignes dans le canevas, vous devez en fait chevaucher les pixels. C'était un choix bizarre dans l'API à mon avis, mais il est facile de travailler avec :

au lieu de ça :

context.moveTo(10, 0);
context.lineTo(10, 30);

faites-le :

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

Le chapitre sur le canevas de HTML5 aborde ce sujet de façon intéressante.
(recherchez la case "ASK PROFESSOR MARKUP" à environ 1/4 de la page).

Répondu el 2 de Janvier, 2012 par Matt Greer (29401 Points )

Answer 4

55voto

revgum Points 508

Une solution encore plus simple est d'utiliser ceci :

context = canvas.context2d;    
context.translate(0.5, 0.5);

À partir de maintenant, vos coordonnées doivent être ajustées de ce 0,5 pixel.

Répondu el 8 de Novembre, 2012 par revgum (508 Points )

Answer 5

24voto

LittleJoe Points 211

J'utilise un écran rétina et j'ai trouvé une solution qui a fonctionné pour moi. ici .

Petit récapitulatif :

Tout d'abord, vous devez définir la taille de votre toile deux fois plus grande que celle que vous souhaitez, par exemple :

canvas = document.getElementById('myCanvas');
canvas.width = 200;
canvas.height = 200;

Puis, à l'aide de CSS, vous le réglez à la taille souhaitée :

canvas.style.width = "100px";
canvas.style.height = "100px";

Et enfin vous mettez le contexte du dessin à l'échelle par 2 :

canvas.getContext('2d').scale(2,2);

Répondu el 24 de Octobre, 2017 par LittleJoe (211 Points )

Answer 6

17voto

Nic Scozzaro Points 742

Le site Web de Mozilla propose un exemple de code permettant de corriger la résolution dans un canevas : https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

<!doctype html>
    <html lang="en">
    <head>
    <meta charset= "UTF-8">

    </head>

    <body>
        <div align = "center">
            <canvas id = "canvas">

            </canvas>

        </div>
          <script type="text/JavaScript">
            var canvas = document.getElementById('canvas');

            var ctx = canvas.getContext('2d');

            // Set display size (css pixels).
            var size = 200;
            canvas.style.width = size + "px";
            canvas.style.height = size + "px";

            // Set actual size in memory (scaled to account for extra pixel density).
            var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
            canvas.width = size * scale;
            canvas.height = size * scale;

            // Normalize coordinate system to use css pixels.
            ctx.scale(scale, scale);

            ctx.fillStyle = "#bada55";
            ctx.fillRect(10, 10, 300, 300);
            ctx.fillStyle = "#ffffff";
            ctx.font = '18px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            var x = size / 2;
            var y = size / 2;

            var textString = "I love MDN";
            ctx.fillText(textString, x, y);
      </script>
    </body>
    </html>

Répondu el 2 de Décembre, 2019 par Nic Scozzaro (742 Points )

Les dessins sur toile, comme les lignes, sont flous

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Les dessins sur toile, comme les lignes, sont flous

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: