web-dev-qa-db-fra.com

Trait de toile HTML5 () é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 ensuite remarqué que même en essayant simplement le code de ma référence ici , je reçois d'énormes lignes floues sans savoir pourquoi.

il est hébergé sur 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.

javascripthtml5canvasstroke
28
Nona Urbiz

Pour une raison quelconque, votre toile est étirée. Comme sa propriété css width est définie sur 100%, il 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 voudrez peut-être essayer d’utiliser un peu de javascript pour le faire remplir la fenêtre ( voir jQuery .width () ):

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

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

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

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

Pour ce faire, définissez l'élément canvas avec une largeur et une hauteur dans le css, puis définissez canvas.width = canvas.clientWidth et canvas.height = canvas.clientHeight

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

Vous n'avez pas indiqué la taille de la zone de travail en pixels, elle a donc été augmentée. C'est 300x150 ici. Essayez de régler la largeur, la hauteur

3
artificialidiot

Sur les écrans de rétine, vous devez également redimensionner (en plus de la réponse acceptée):

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

Le problème de dimensionnement css mentionné dans ces commentaires est correct, mais une autre chose plus subtile qui peut causer des lignes floues consiste à oublier d'appeler, appelez context.beginPath() avant de tracer une ligne. Sans appeler cela, vous obtiendrez toujours une ligne, mais elle ne sera pas lissée, ce qui la fera ressembler à une série d'étapes.

2
Scott Antipa

J'ai trouvé la raison pour laquelle le mien était flou, c'est qu'il y avait un léger écart entre la largeur en ligne et la largeur du CSS. 

J'ai les deux paramètres inline width/height ET css width/height attribués à ma toile, car je dois conserver ses dimensions physiques statiques tout en augmentant ses dimensions en ligne pour les écrans de rétine. 

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

0
Fijjit