ความคิดเห็น: HTML5 Canvas วาดรูปภาพและบันทึกไว้ในรูปภาพ ใช้ปลั๊กอิน JCANVAS ตัวอย่างเฉพาะมีดังนี้: เพื่อนที่สนใจสามารถอ้างถึงต่อไปนี้
ใช้ปลั๊กอิน JCANVAS<head>
<script src = 'jQuery-1.9.1.js'> </script>
<script src = 'jcanvas.min.js'> </script>
<!-<สคริปต์ src = 'js/jQuery.mobile-1.2.0.min.js'> </script>->
<script>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var miny = 99999;
ฟังก์ชั่น checkdata (เหตุการณ์) {
var x = event.pagex-$ ('Canvas'). Offset (). ซ้าย;
var y = event.pagey-$ ('Canvas'). Offset (). ด้านบน;
ถ้า (x> maxx) {
maxx = x;
} อื่นถ้า (x <minx) {
minx = x;
-
ถ้า (y> maxy) {
maxy = y;
} อื่นถ้า (y <miny) {
miny = y;
-
-
$ (function () {
var obj = $ ('canvas');
var temp_e;
var temp_draw = false;
obj.on ({
Mousedown: ฟังก์ชั่น (e) {
temp_e = e;
temp_draw = true;
checkdata (e);
-
Mousemove: ฟังก์ชั่น (e) {
ถ้า (temp_draw) {
obj.drawline ({
Strokestyle: '#000',
StrokeWidth: 3,
x1: temp_e.pagex-$ ('canvas'). ออฟเซ็ต (). ซ้าย, y1: temp_e.pagey-$ ('canvas'). ออฟเซ็ต (). ด้านบน, ด้านบน,
X2: E.Pagex-$ ('Canvas'). Offset (). ซ้าย, y2: e.pagey-$ ('canvas'). Offset (). ด้านบน, ด้านบน,
-
-
temp_e = e;
checkdata (e);
-
Mouseup: ฟังก์ชั่น (e) {
temp_e = null;
temp_draw = false;
checkdata (e);
-
Mouseout: function () {
temp_e = null;
temp_draw = false;
-
-
$ ("#Clean") บน ("คลิก", function () {
maxx = -1;
maxy = -1;
minx = 99999;
Miny = 99999;
obj.clearcanvas ();
-
$ ("#save"). on ("คลิก", function () {
var image = obj.getCanVasimage ("png");
การแจ้งเตือน (รูปภาพ);
-
-
</script>
</head>
<body>
<อินพุต type = "ปุ่ม" value = "บันทึก" />>>
<input type = "button" value = "Clear" />
<br/>
<Canvas> </sanvas>
<div> </div>
</body>