Dibuja en HTML5 Canvas usando un mouse

Quiero dibujar en un Lienzo HTML usando un mouse (ej: dibujar una firma, dibujar un nombre, …)

Por favor, ayúdame, ¿cómo puedo hacer? Por favor, dame un código fuente. Gracias

Aquí hay una muestra de trabajo.

    
Choose Color
Eraser

Esta es la manera más directa de crear una aplicación de dibujo con canvas:

  1. Adjunte un mousedown mousemove mousedown , mousemove y mouseup al DOM de mouseup
  2. en mousedown , obtenga las coordenadas del mouse y use el método moveTo() para beginPath() el cursor de dibujo y el método beginPath() para comenzar una nueva ruta de dibujo.
  3. en mousemove , agrega continuamente un nuevo punto a la ruta con lineTo() y colorea el último segmento con stroke() .
  4. en mouseup , establece una bandera para deshabilitar el dibujo.

A partir de ahí, puede agregar todo tipo de otras funciones, como darle al usuario la capacidad de elegir un grosor de línea, color, trazos de pincel e incluso capas.

Busqué en Google esto (“progtwig de pintura de canvas html5”). Parece lo que necesitas.

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

revisa esto http://jsfiddle.net/ArtBIT/kneDX/ . Esto debería dirigirlo en la dirección correcta

Estaba buscando utilizar este método para las firmas, encontré una muestra en http://codetheory.in/ .

He agregado el siguiente código a 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(); }; }()); 

Creo que otros ejemplos son demasiado complicados. Este es más simple y 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! } 

Aquí está mi canvas de trabajo muy simple dibujar y borrar.

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 mira esto:
Ejemplo:
https://github.com/williammalone/Simple-HTML5-Drawing-App

Documentación:
http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

Este documento incluye los siguientes códigos:

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

Y otro ejemplo impresionante
http://perfectionkills.com/exploring-canvas-drawing-techniques/

Avíseme si tiene problemas para implementar esto. Utiliza processing.js y tiene características para cambiar colores y hacer que el punto de dibujo sea más grande y más pequeño.

           

si tiene una imagen de fondo para su canvas, tendrá que hacer algunos ajustes para que funcione correctamente porque el truco de borrado blanco ocultará el fondo.

aquí hay una esencia con el código.

      
Choose Color
Eraser