Dessiner sur HTML5 Canvas à l’aide d’une souris

Voici un échantillon de travail.

    
Choose Color
 
 
 
 
 
 
 
Eraser
 
      

Voici le moyen le plus simple de créer une application de dessin avec canvas:

1. Joindre un mousedown mousemove mousedown , mousemove et mouseup au DOM de la zone de mouseup
2. sur mousedown , obtenez les coordonnées de la souris et utilisez la moveTo() pour positionner votre curseur de dessin et la méthode beginPath() pour commencer un nouveau chemin de dessin.
3. sur mousemove , ajoutez continuellement un nouveau point au chemin avec lineTo() et lineTo() le dernier segment avec stroke() .
4. sur mouseup , définissez un indicateur pour désactiver le dessin.

À partir de là, vous pouvez append toutes sortes d’autres fonctionnalités, telles que la possibilité pour l’utilisateur de choisir une épaisseur de ligne, une couleur, des traits de pinceau et même des calques.

Googlé ceci (“programme de peinture sur canvas html5”). On dirait ce dont vous avez besoin.

http://dev.opera.com/articles/view/html5-canvas-painting/

vérifiez ceci http://jsfiddle.net/ArtBIT/kneDX/ . Cela devrait vous diriger dans la bonne direction

Je cherchais à utiliser cette méthode pour les signatures aussi, j’ai trouvé un exemple sur http://codetheory.in/ .

J’ai ajouté le code ci-dessous à un jsfiddle

Html:

Javascript:

  (function() { var canvas = document.querySelector('#paint'); var ctx = canvas.getContext('2d'); var sketch = document.querySelector('#sketch'); var sketch_style = getComputedStyle(sketch); canvas.width = parseInt(sketch_style.getPropertyValue('width')); canvas.height = parseInt(sketch_style.getPropertyValue('height')); var mouse = {x: 0, y: 0}; var last_mouse = {x: 0, y: 0}; /* Mouse Capturing Work */ canvas.addEventListener('mousemove', function(e) { last_mouse.x = mouse.x; last_mouse.y = mouse.y; mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); /* Drawing on Paint App */ ctx.lineWidth = 5; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.strokeStyle = 'blue'; canvas.addEventListener('mousedown', function(e) { canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var onPaint = function() { ctx.beginPath(); ctx.moveTo(last_mouse.x, last_mouse.y); ctx.lineTo(mouse.x, mouse.y); ctx.closePath(); ctx.stroke(); }; }()); 

Je pense que d’autres exemples ici sont trop compliqués. Celui-ci est plus simple et JS seulement …

 // create canvas element and append it to document body var canvas = document.createElement('canvas'); document.body.appendChild(canvas); // some hotfixes... ( ≖_≖) document.body.style.margin = 0; canvas.style.position = 'fixed'; // get canvas 2D context and set him correct size var ctx = canvas.getContext('2d'); resize(); // last known position var pos = { x: 0, y: 0 }; window.addEventListener('resize', resize); document.addEventListener('mousemove', draw); document.addEventListener('mousedown', setPosition); document.addEventListener('mouseenter', setPosition); // new position from mouse event function setPosition(e) { pos.x = e.clientX; pos.y = e.clientY; } // resize canvas function resize() { ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; } function draw(e) { // mouse left button must be pressed if (e.buttons !== 1) return; ctx.beginPath(); // begin ctx.lineWidth = 5; ctx.lineCap = 'round'; ctx.strokeStyle = '#c0392b'; ctx.moveTo(pos.x, pos.y); // from setPosition(e); ctx.lineTo(pos.x, pos.y); // to ctx.stroke(); // draw it! } 

Voici mon tableau de travail très simple dessiner et effacer.

https://jsfiddle.net/richardcwc/d2gxjdva/

 //Canvas var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); //Variables var canvasx = $(canvas).offset().left; var canvasy = $(canvas).offset().top; var last_mousex = last_mousey = 0; var mousex = mousey = 0; var mousedown = false; var tooltype = 'draw'; //Mousedown $(canvas).on('mousedown', function(e) { last_mousex = mousex = parseInt(e.clientX-canvasx); last_mousey = mousey = parseInt(e.clientY-canvasy); mousedown = true; }); //Mouseup $(canvas).on('mouseup', function(e) { mousedown = false; }); //Mousemove $(canvas).on('mousemove', function(e) { mousex = parseInt(e.clientX-canvasx); mousey = parseInt(e.clientY-canvasy); if(mousedown) { ctx.beginPath(); if(tooltype=='draw') { ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = 'black'; ctx.lineWidth = 3; } else { ctx.globalCompositeOperation = 'destination-out'; ctx.lineWidth = 10; } ctx.moveTo(last_mousex,last_mousey); ctx.lineTo(mousex,mousey); ctx.lineJoin = ctx.lineCap = 'round'; ctx.stroke(); } last_mousex = mousex; last_mousey = mousey; //Output $('#output').html('current: '+mousex+', '+mousey+'
last: '+last_mousex+', '+last_mousey+'
mousedown: '+mousedown); }); //Use draw|erase use_tool = function(tool) { tooltype = tool; //update } 

 canvas { cursor: crosshair; border: 1px solid #000000; } 

Alco vérifie celui-ci:
Exemple:
https://github.com/williammalone/Simple-HTML5-Drawing-App

Documentation:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Ce document comprend les codes suivants: –

HTML:

JS:

 context = document.getElementById('canvas').getContext("2d"); $('#canvas').mousedown(function(e){ var mouseX = e.pageX - this.offsetLeft; var mouseY = e.pageY - this.offsetTop; paint = true; addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); redraw(); }); $('#canvas').mouseup(function(e){ paint = false; }); $('#canvas').mouseleave(function(e){ paint = false; }); var clickX = new Array(); var clickY = new Array(); var clickDrag = new Array(); var paint; function addClick(x, y, dragging) { clickX.push(x); clickY.push(y); clickDrag.push(dragging); } //Also redraw function redraw(){ context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas context.strokeStyle = "#df4b26"; context.lineJoin = "round"; context.lineWidth = 5; for(var i=0; i < clickX.length; i++) { context.beginPath(); if(clickDrag[i] && i){ context.moveTo(clickX[i-1], clickY[i-1]); }else{ context.moveTo(clickX[i]-1, clickY[i]); } context.lineTo(clickX[i], clickY[i]); context.closePath(); context.stroke(); } } 

Et un autre exemple génial
http://perfectionkills.com/exploring-canvas-drawing-techniques/

Faites-moi savoir si vous avez du mal à mettre en œuvre cela. Il utilise processing.js et a des fonctionnalités pour changer les couleurs et rendre le sharepoint dessin plus grand et plus petit.

Si vous avez une image d’arrière-plan pour votre canevas, vous devrez faire quelques réglages pour que cela fonctionne correctement, car une astuce d’effacement blanche cachera l’arrière-plan.

voici un aperçu du code.

      
Choose Color
 
 
 
 
 
 
 
Eraser