Komentar: HTML5 Canvas menggambar dan menyimpannya ke dalam gambar. Plug-in JCanvas digunakan. Contoh spesifiknya adalah sebagai berikut: Teman yang tertarik dapat merujuk pada berikut ini
Plugin JCanvas digunakan.<head>
<Script src = 'jQuery-1.9.1.js'> </script>
<Script src = 'jcanvas.min.js'> </script>
<!-<skrip src = 'js/jQuery.mobile-1.2.0.min.js'> </script>->
<script>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var miny = 99999;
function checkData (event) {
var x = event.pagex-$ ('canvas'). offset (). kiri;
var y = event.pagey-$ ('canvas'). offset (). Top;
if (x> maxx) {
maxx = x;
} lain jika (x <minx) {
minx = x;
}
if (y> maxy) {
Maxy = y;
} lain jika (y <miny) {
miny = y;
}
}
$ (function () {
var obj = $ ('kanvas');
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 (). kiri, y1: temp_e.pagey-$ ('canvas'). offset (). Top,
x2: e.pagex-$ ('Canvas'). Offset (). Kiri, Y2: E.Pagey-$ ('Canvas'). 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;
}
});
$ ("#clean"). on ("click", function () {
maxx = -1;
Maxy = -1;
minx = 99999;
Miny = 99999;
obj.clearcanvas ();
});
$ ("#save"). on ("click", function () {
var image = obj.getCanvasimage ("png");
peringatan (gambar);
});
});
</script>
</head>
<body>
<input type = "tombol" value = "save" />
<input type = "tombol" value = "clear" />
<br/>
<Canvas> </an Canvas>
<div> </div>
</body>