Comentario: lienzo HTML5 dibuje imágenes y guárdelas en imágenes. Se utiliza el complemento JCanvas. Los ejemplos específicos son los siguientes: los amigos interesados pueden referirse a los siguientes
Se usó el complemento JCanvas.<Evista>
<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>->>
<script>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var miny = 99999;
función checkData (evento) {
var x = event.pagex-$ ('Canvas'). offset (). izquierda;
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 = $ ('Canvas');
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',
Strokewidth: 3,
x1: temp_e.pagex-$ ('Canvas'). offset (). Izquierda, y1: temp_e.pagey-$ ('Canvas'). Offset (). Top,
X2: E.Pagex-$ ('Canvas'). Offset (). Izquierda, Y2: E.Pagey-$ ('Canvas'). Offset (). Top,
});
}
temp_e = e;
checkData (e);
},
MouseUp: function (e) {
temp_e = nulo;
temp_draw = falso;
checkData (e);
},
mouseOut: functer () {
temp_e = nulo;
temp_draw = falso;
}
});
$ ("#Clean"). On ("Click", function () {
maxx = -1;
maxy = -1;
minx = 99999;
Miny = 99999;
obj.cLearcanvas ();
});
$ ("#save"). on ("hacer clic", function () {
var imagen = obj.getCanVasImage ("png");
alerta (imagen);
});
});
</script>
</ablo>
<Body>
<input type = "button" value = "guardar" />
<input type = "button" value = "clare" />
<br/>
<Canvas> </Canvas>
<div> </div>
</body>