Disegna su Canvas HTML5 usando un mouse

Voglio disegnare su una canvas HTML usando un mouse (es: disegna una firma, disegna un nome, …)

Per favore aiutami come posso fare? Si prega di fornire un codice sorgente. Grazie

Ecco un esempio funzionante.

    
Choose Color
Eraser

Ecco il modo più semplice per creare un’applicazione di disegno con canvas:

  1. Allega un listener di eventi mouseup , mousemove e mouseup al DOM canvas
  2. sul mouse, ottieni le coordinate del mouse e usa il metodo moveTo() per posizionare il cursore del disegno e il metodo beginPath() per iniziare un nuovo percorso del disegno.
  3. su mousemove , aggiungi continuamente un nuovo punto al percorso con lineTo() e colora l’ultimo segmento con stroke() .
  4. su mouseup , imposta un flag per disabilitare il disegno.

Da lì, puoi aggiungere tutti i tipi di altre funzionalità come dare all’utente la possibilità di scegliere uno spessore di linea, colore, pennellate e persino livelli.

Googled questo (“programma di pittura su canvas html5”). Sembra quello di cui hai bisogno.

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

controlla questo http://jsfiddle.net/ArtBIT/kneDX/ . Questo dovrebbe indirizzarti nella giusta direzione

Stavo cercando di utilizzare questo metodo anche per le firme, ho trovato un esempio su http://codetheory.in/ .

Ho aggiunto il codice seguente a 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(); }; }()); 

Penso che altri esempi qui siano troppo complicati. Questo è più semplice e solo JS …

 // 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! } 

Ecco la mia semplice operazione di disegno su canvas e cancellazione.

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 controlla questo:
Esempio:
https://github.com/williammalone/Simple-HTML5-Drawing-App

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

Questo documento include i seguenti codici: –

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(); } } 

E un altro fantastico esempio
http://perfectionkills.com/exploring-canvas-drawing-techniques/

Fammi sapere se hai problemi nell’implementazione di questo. Utilizza processing.js e ha caratteristiche per cambiare i colors e rendere il punto di disegno sempre più piccolo.

           

se si dispone di un’immagine di sfondo per la canvas, sarà necessario apportare alcune modifiche per farlo funzionare correttamente perché il trucco di cancellazione bianco nasconderà lo sfondo.

ecco un sumrio con il codice.

      
Choose Color
Eraser