Tirage sur Toile HTML5 à l'aide d'une souris
Je veux dessiner sur un Canevas HTML à l'aide d'une souris (ex: dessiner une signature, dessiner un nom,...)
S'il vous plaît aider moi comment je peux faire? Merci de donner le code source.
Merci
- cochez cette! stackoverflow.com/questions/3814442/...
- Liées à la bibliothèque javascript pour la forme libre de dessin
- Voir aussi: Comment puis-je la main de tirage sur toile?
Vous devez vous connecter pour publier un commentaire.
Voici un échantillon de travail.
HTML:
dot_flag
n'est pas nécessaire? Ou ai-je raté quelque chose?canvas.offsetLeft;
etcanvas.offsetTop;
aveccanvas.getBoundingClientRect().left;
etcanvas.getBoundingClientRect().top;
respectivement pour résoudre le problème de défilement.Voici la façon la plus simple de créer une application de dessin avec de la toile:
mousedown
,mousemove
, etmouseup
écouteur d'événement sur la toile DOMmousedown
, obtenir les coordonnées de la souris, et l'utilisation de lamoveTo()
méthode de la position de votre curseur de dessin et labeginPath()
méthode pour commencer un nouveau chemin de dessin.mousemove
, continuer d'ajouter un nouveau point à la trajectoire aveclineTo()
, et la couleur du dernier segment avecstroke()
.mouseup
, définir un indicateur pour désactiver le dessin.À partir de là, vous pouvez ajouter toutes sortes d'autres fonctionnalités comme donnant à l'utilisateur la possibilité de choisir une épaisseur de ligne, la couleur, les coups de pinceau, et même des couches.
Googlé ce ("html5 canvas programme de peinture"). Ressemble à ce que vous avez besoin.
http://dev.opera.com/articles/view/html5-canvas-painting/
Je pense, d'autres exemples sont ici trop compliqué. Cette méthode est plus simple et JS seulement...
JS:
if (e.buttons !== 1) return;
;-).resize
fonction. Je suis réglage de la largeur et de la hauteur de la toile basé sur la taille de la fenêtre. Vous devez définir ces basé sur votre<div class="container-fluid">
.offset
danssetPosition
fonction...cochez cette http://jsfiddle.net/ArtBIT/kneDX/. Cela devrait vous diriger sur la droite en direction de
Je cherchais à utiliser cette méthode pour les signatures en tant que bien, j'ai trouvé un exemple sur http://codetheory.in/.
J'ai ajouté le code ci-dessous pour une jsfiddle
Html:
Javascript:
Voici mon très simple travail de la toile dessiner et effacer.
https://jsfiddle.net/richardcwc/d2gxjdva/
JS:
CSS:
HTML:
Alco vérifier celui-ci:
Exemple:
https://github.com/williammalone/Simple-HTML5-Drawing-App
Documentation:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
Le présent document comprend des codes suivants:-
HTML:
JS:
Et un autre par exemple impressionnant
http://perfectionkills.com/exploring-canvas-drawing-techniques/
J'ai dû fournir un exemple simple pour ce sujet, je vais donc partager ici:
http://jsfiddle.net/Haelle/v6tfp2e1
JS:
CSS:
HTML:
Laissez-moi savoir si vous avez des problèmes de mise en œuvre de cette. Il utilise processing.js et il a des fonctionnalités pour changer de couleur et de faire le tirage au sort point de grande et de petite taille.
init.js
?Ça fait des années que la question a été posée et a été répondu.
Pour n'importe qui qui regarde pour une simple zone de dessin (par exemple, pour la prise de la signature de l'utilisateur/client), ici, je suis l'affichage simplifié la version jquery qui est actuellement accepté de répondre à
JS:
HTML:
si vous avez de l'image d'arrière-plan pour votre toile, vous aurez à faire quelques ajustements pour qu'il fonctionne correctement car blanc effacement astuce permet de masquer l'arrière-plan.
ici est un gist avec le code.