HTML5 canvas stroke () épais et flou

J'essaie de permettre à l'utilisateur de dessiner un rectangle sur le canevas (comme une boîte de sélection). J'obtiens des résultats ridicules, mais j'ai remarqué que même en essayant simplement le code de ma référence ici , j'obtiens d'énormes lignes floues et je ne sais pas pourquoi.

Il est hébergé à dylanstestserver.com/drawcss . le javascript est en ligne afin que vous puissiez le vérifier. J'utilise jQuery pour simplifier l'obtention des coordonnées de la souris.

26
demandé sur Bill the Lizard 2010-10-21 23:22:08

7 réponses

Pour une raison quelconque, votre toile est étirée. Parce que vous avez sa propriété css width définie sur 100%, elle l'étire à partir d'une sorte de taille native. C'est la différence entre l'utilisation de la propriété css width et l'attribut width sur la balise <canvas>. Vous pouvez essayer d'utiliser un peu de javascript pour le faire remplir la fenêtre ( Voir jQuery .largeur()):

jQuery(document).ready(function(){
    var canvas = document.getElementById('drawing');
    canvas.width(($(window).width()).height($(window).height());
    var context = canvas.getContext('2d');
    //...
36
répondu clarkf 2010-10-21 19:44:34

Le problème flou se produira si vous utilisez css pour définir la hauteur et la largeur du canevas au lieu de définir la hauteur et la largeur dans l'élément canevas.

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

<canvas height="800" width="1200"></canvas>     RIGHT WAY -- SHARP LINES
56
répondu DougLeary 2012-10-12 16:00:09

La façon dont je le fais est de définir l'élément canvas sur une largeur et une hauteur dans le css, puis de définir le canvas.largeur = canvas.clientWidth et canvas.hauteur = canvas.clientHeight

var canvas =  document.getElementById("myCanvas");
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
var context = canvas.getContext("2d");
8
répondu miller the gorilla 2016-02-18 00:17:03

Vous n'avez pas indiqué la taille du canevas en pixels, il est donc mis à l'échelle. Il est 300x150 ici. Essayez de définir la largeur, la hauteur

3
répondu artificialidiot 2010-10-21 19:52:40

Sur les écrans retina, vous devez également mettre à l'échelle (en plus de la réponse acceptée):

var context = canvas.getContext('2d');
context.scale(2,2);
3
répondu laktak 2014-05-20 22:35:15

Le problème de dimensionnement CSS mentionné dans ces commentaires est correct, mais une autre chose plus subtile qui peut causer des lignes floues est d'oublier d'appeler make a call to context.beginPath() avant de dessiner une ligne. Sans appeler cela, vous obtiendrez toujours une ligne, mais elle ne sera pas lissée, ce qui fait que la ligne ressemble à une série d'étapes.

2
répondu Scott Antipa 2015-01-21 08:49:20

J'ai trouvé que la raison pour laquelle le mien était flou était qu'il y avait une légère différence entre la largeur en ligne et la largeur CSS.

J'ai à la fois des paramètres de largeur/hauteur en ligne et de largeur/hauteur css assignés à mon canevas, car je dois garder ses dimensions physiques statiques, tout en augmentant ses dimensions en ligne pour les écrans retina.

Vérifiez que les vôtres sont les mêmes si vous avez une situation comme la mienne.

0
répondu Fijjit 2014-08-30 21:56:58