Je travaille sur un script qui permet à l'utilisateur de dessiner avec la souris: http://jsfiddle.net/ujmgu/
CSS fort> p> <div id="myid"></div>
3 Réponses :
Vous auriez besoin de suivre le point précédent, puis de dessiner une ligne entre le nouveau point et le précédent.
+1 Pour l'idée, bien que "dessiner une ligne" n'est pas simple lorsque votre méthode de peinture consiste à positionner absolument une série de divs 10x10.
Vérifiez ceci dehors: http://jsfiddle.net/kodekreachor/9dbp3/6/
L'objet suivant sur le lien donné contient l'algorithme: permettez-moi de savoir si vous avez des questions sur la manière dont je l'ai fait. Le principe est basé sur l'algorithme de la ligne de Bresenham et doit également être compatible dans les navigateurs plus anciens.
Comme @kand a mentionné, une toile est vraiment le meilleur outil de dessin.
Si vous devez utiliser votre méthode div , ou si ceci est juste pour le plaisir, vous pouvez étendre votre approche en enregistrant la position précédente de la souris, puis dessinez les "pixels" intermédiaires nécessaires pour compléter la ligne. Utilisation, par exemple, algorithme de ligne de Bresenham .
Probablement une mauvaise idée de faire cela avec des divs; Pensez à utiliser une toile à la place. La plupart des navigateurs seront plus rapides avec la toile que les DIV, puisque DIVS nécessite une manipulation DOM plutôt que de simples peintures raster.
La peinture de cette manière (en utilisant des divs sous forme de pixels) est assez limitée. Quelles sont vos exigences et quel soutien au navigateur avez-vous besoin? Y a-t-il une raison pour laquelle vous devez utiliser cette méthode plutôt que (dire) Toile?
Coz im pas très familier avec la toile, et j'ai besoin de quelque chose de simple afin que je puisse envoyer ce secret à d'autres personnes de manière compliquée, en tant que superposition / masque sur quelque chose d'autre qui est derrière cela.
@Philh DIVS peut fonctionner si vous utilisez l'algorithme droit, Bresenham's est ce que j'ai utilisé pour la compatibilité dans les navigateurs de support non HTLM5. en.wikipedia.org/wiki/...