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.
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');
//...
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
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");
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
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);
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.
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.