Comentário: A tela HTML5 desenha figuras e salve -as em figuras. O plug-in jcanvas é usado. Os exemplos específicos são os seguintes: amigos interessados podem se referir ao seguinte
O plugin jcanvas foi usado.<head>
<script src = 'jQuery-1.9.1.js'> </sCript>
<script src = 'jcanvas.min.js'> </script>
<!-<script src = 'js/jQuery.mobile-1.2.0.min.js'> </sCript>->
<Cript>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var miny = 99999;
função checkData (evento) {
var x = event.pagex-$ ('canvas'). Offset (). Left;
var y = event.Pagey-$ ('Canvas'). Offset (). Top;
if (x> maxx) {
maxx = x;
} else if (x <minx) {
minx = x;;
}
if (y> maxy) {
maxy = y;
} else if (y <miny) {
miny = y;
}
}
$ (function () {
var obj = $ ('tela');
var temp_e;
var temp_draw = false;
obj.on ({
Mousedown: function (e) {
temp_e = e;
temp_draw = true;
checkdata (e);
},
mousemove: function (e) {
if (temp_draw) {
obj.drawline ({
Strokestyle: '#000',
largura de golpe: 3,
x1: temp_e.pagex-$ ('canvas'). Offset (). Esquerda, y1: temp_e.pagey-$ ('canvas'). Offset ().
x2: e.pagex-$ ('Canvas'). Offset (). Esquerda, y2: e.pagey-$ ('tela'). Offset (). Top,
});
}
temp_e = e;
checkdata (e);
},
MouseUp: function (e) {
temp_e = null;
temp_draw = false;
checkdata (e);
},
MouseOut: function () {
temp_e = null;
temp_draw = false;
}
});
$ ("#limpo"). on ("clique", function () {
maxx = -1;
maxy = -1;
minx = 99999;
miny = 99999;
obj.clearCanvas ();
});
$ ("#salvar"). on ("clique", function () {
var imagem = obj.getCanvasimage ("png");
alerta (imagem);
});
});
</script>
</head>
<Body>
<input type = "button" value = "salvar" />
<input type = "button" value = "clear" />
<br/>
<lVAs> </canvas>
<div> </div>
</body>