# Zeichnen in Formular



## dwex (21. November 2010)

Hallo Leute,

Ich würde gerne in einem HTML-Formular eine Art Unterschriftenfeld einfügen wo man "Reinzeichnen" kann und dieses Bild dann mit dem Formular mitgesendet wird.

Es geht darum, dass ich mir quasi als Erleichterung für meine Aussendiensttätigkeit ein Onlineformular basteln möchte in dem mein Kunde nachher meine Anwesenheit mit seiner Unterschrift bestätigt. Dann würde ich ein PDF draus machen und fertig.

Ich weis, dass dies im Zweifel keine Rechtskraft hat aber ich möchte es dennoch so machen.

Hat jemand eine Idee wie man sowas machen kann?
Bin zwar nicht fit mit Javascript jedoch ganz gut in PHP und HTML.

Vielen Dank für eure Hilfe im Voraus!


----------



## ComFreek (21. November 2010)

Man könnte das neue CANVAS-Element in HTML5 benutzen.

Hier ist eine tolle Beschreibung von Canvas, erstellt von Quaese.


----------



## dwex (21. November 2010)

Vielen Dank für die Info - schaue mir das mal genauer an.


----------



## ComFreek (21. November 2010)

Ich habe mal einfach aus Spaß auch sowas gemacht, allerdings entstehen immer "Lücken":

```
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    
    var Drawing = false;
    $("document").ready(function()
    {
      var CanvasObject = document.getElementById("canvas_signature");
      Context = CanvasObject.getContext("2d");
      Context.strokeStyle = "rgb(255, 0, 0)";
      Context.lineWidth = "1";

      $("#canvas_signature").mousedown(function(e)
      {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        Context.moveTo(x,y);
        Drawing = true;
      });
      $("#canvas_signature").mouseup(function(e)
      {
        Drawing = false;
      });
      $("#canvas_signature").mousemove(function(e)
      {        
        if (Drawing)
        {
          var x = e.pageX - this.offsetLeft;
          var y = e.pageY - this.offsetTop;
          Context.beginPath();
          Context.moveTo(x, y);
          Context.arc(x, y, 1, 0, (Math.PI*360)/180, false);
          Context.fill();
          Context.closePath();
          
          $("#coords").text(x+"  "+y);
        }
      });
    }); 
    </script>
  </head>
  <body onload="InitSignature()">
    <span id="coords"></span><br /><br />
    <canvas width="300" height="100" style="border:1px solid black" id="canvas_signature" />
  </body>
</html>
```


----------



## CPoly (21. November 2010)

Darüber bin ich vor kurzem gestolpert.
http://thomasjbradley.ca/lab/signature-pad-require-drawn

Und hier die komplette Anleitung und Referenz
http://thomasjbradley.ca/lab/signature-pad

Du kannst versuchen alles nachzuvollziehen oder einfach das jQuery Plugin benutzen.


----------

