Kommentar: HTML5 -Leinwand zeichnen Bilder und speichern Sie sie in Bilder. Das JCANVAS-Plug-In wird verwendet. Die spezifischen Beispiele sind wie folgt: Interessierte Freunde können sich auf Folgendes beziehen
Das JCANVAS -Plugin wurde verwendet.<kopf>
<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;
Funktion checkData (Ereignis) {
var x = event.pagex-$ ('canvas'). offset ().
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: Funktion (e) {
temp_e = e;
temp_draw = true;
checkData (e);
},
Mousemove: Funktion (e) {
if (temp_draw) {
obj.drawline ({{{
Strokestyle: '#000',
Strokewidth: 3,
x1: temp_e.pagex-$ ('canvas'). offset (). links, y1: temp_e.pagey-$ ('canvas').
X2: E.Pagex-$ ('Canvas'). Offset (). Links, Y2: E.Pagey-$ ('Canvas').
});
}
temp_e = e;
checkData (e);
},
Mausup: Funktion (e) {
temp_e = null;
temp_draw = false;
checkData (e);
},
Mausout: function () {
temp_e = null;
temp_draw = false;
}
});
$ ("#Clean"). On ("Click", function () {
maxx = -1;
maxy = -1;
minx = 99999;
Miny = 99999;
obj.clearcanvas ();
});
$ ("#speichern"). On ("Click", function () {
var image = obj.getCanvasimage ("png");
Alarm (Bild);
});
});
</script>
</head>
<body>
<Eingabe type = "Taste" value = "speichern" />
<Eingabe type = "Taste" value = "löschen" />
<br/>
<Canvas> </canvas>
<div> </div>
</body>