댓글 : html5 캔버스는 그림을 그리고 그림에 저장합니다. JCANVAS 플러그인이 사용됩니다. 구체적인 예는 다음과 같습니다. 관심있는 친구는 다음을 참조 할 수 있습니다.
JCANVAS 플러그인이 사용되었습니다.<헤드>
<스크립트 src = 'jquery-1.9.1.js'> </script>
<script src = 'jcanvas.min.js'> </script>
<!-<script src = 'js/jquery.mobile-1.2.0.min.js'> </script>->
<cript>
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 (). 상단;
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 : 기능 (e) {
temp_e = e;
temp_draw = true;
CheckData (e);
},
MouseMove : 함수 (e) {
if (temp_draw) {
obj.drawline ({
뇌졸중 : '#000',
strokewidth : 3,
x1 : temp_e.pagex- $ ( 'canvas'). offset (). left, y1 : temp_e.pagey- $ ( 'canvas'). offset (). 상단,
x2 : e.pagex- $ ( 'canvas'). offset (). left, y2 : e.pagey-$ ( 'canvas'). hepset (). 상단,
});
}
temp_e = e;
CheckData (e);
},
마우스 업 : 기능 (e) {
temp_e = null;
temp_draw = false;
CheckData (e);
},
마우스 아웃 : 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");
경고 (이미지);
});
});
</스크립트>
</head>
<body>
<입력 유형 = "버튼"값 = "저장" />
<입력 유형 = "버튼"value = "Clear" />
<br/>
<canvas> </canvas>
<div> </div>
</body>