Comentário: HTML5 Compartilhamento de Código da prancha de desenho HTML, consulte -o
Placa de desenho simples html5
<! Doctype html>
<html lang = "en-us">
<head>
<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 >>
</head>
<estilo>
Canvas {Border: 2px Solid #000;}
</style>
<Body>
<lVAs> </canvas>
<script type = "text/javascript">
$ (document) .ready (function () {
var canvas = document.getElementById ("draw");
var drak = Canvas.getContext ("2D");
draw.LineWidth = 5; // Espessura da linha
draw.strokestyle = "vermelho"; //Cor
var godraw = false;
// Pressione o mouse
$ ("#draw"). Mousedown (função (e) {
// coordenadas precisas
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey-this.offsettop;
draw.moveto (mousex, mousey);
godraw = true; </p> <p>})
// Deixe o mouse
$ ("#draw"). mouseup (function (e) {
godraw = falso;
})
// mova o mouse
$ ("#draw"). mousemove (função (e) {
if (godraw) {
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey-this.offsettop;
draw.lineto (mousex+4, mousey+4);
draw.stroke ();
} </p> <p>})
})
</script>
</body>
</html>
Diagrama de reprodução