Комментарий: HTML5 Canvas рисует картинки и сохраните их в картинки. Используется плагин JCanvas. Конкретные примеры следующие: заинтересованные друзья могут ссылаться на следующее
Плагин JCanvas был использован.<голова>
<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>->
<Скрипт>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var miny = 99999;
функция CheckData (Event) {
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: function (e) {
temp_e = e;
temp_draw = true;
checkData (e);
},
MouseMove: function (e) {
if (temp_draw) {
obj.drawline ({
Strokestyle: '#000',
Шида -прогиба: 3,
x1: temp_e.pagex-$ ('canvas'). offset (). слева, y1: temp_e.pagey-$ ('canvas'). offset ().
x2: e.pagex-$ ('canvas'). offset ().
});
}
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");
оповещение (изображение);
});
});
</script>
</head>
<тело>
<input type = "button" value = "save" />
<input type = "button" value = "clear" />
<br/>
<Canvas> </canvas>
<div> </div>
</body>