Comentario: HTML5 Simple Drawing Board Code Compartir, consultelo
Tablero de dibujo simple html5
<! Doctype html>
<html lang = "en-us">
<Evista>
<title> </title>
<meta charset = "utf-8">
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</ablo>
<estilo>
lienzo {borde: 2px sólido #000;}
</style>
<Body>
<Canvas> </Canvas>
<script type = "text/javaScript">
$ (documento) .Ready (function () {
var canvas = document.getElementById ("dibujar");
var draw = Canvas.getContext ("2d");
sort.linewidth = 5; // espesor de línea
draw.strokestyle = "rojo"; //Color
var godraw = falso;
// presione el mouse
$ ("#Draw"). MouseDown (función (e) {
// coordenadas precisas
var mousex = e.pagex-this.OffSetLeft;
var rOUSEY = E.Pagey-this.OffSettop;
Draw.moveto (Mousex, Mousey);
godraw = true; </p> <p>})
// deja que el mouse
$ ("#Draw"). MouseUp (function (e) {
Godraw = falso;
})
// mover el mouse
$ ("#Draw"). MouseMove (función (e) {
if (Godraw) {
var mousex = e.pagex-this.OffSetLeft;
var rOUSEY = E.Pagey-this.OffSettop;
dibujo.lineto (mousex+4, mousey+4);
Draw.stroke ();
} </p> <p>})
})
</script>
</body>
</html>
Diagrama de reproducción