تعليق: HTML5 Canvas ارسم الصور وحفظها في الصور. يتم استخدام المكون الإضافي JCanvas. الأمثلة المحددة هي كما يلي: يمكن للأصدقاء المهتمين الرجوع إلى ما يلي
تم استخدام المكون الإضافي JCanvas.<head>
<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 ؛
وظيفة checkData (الحدث) {
var x = event.pagex-$ ('canvas'). الإزاحة (). اليسار ؛
var y = event.pagey-$ ('canvas'). Offset (). top ؛
if (x> maxx) {
maxx = x ؛
} آخر إذا (x <minx) {
minx = x ؛
}
if (y> maxy) {
maxy = y ؛
} آخر إذا (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 = صحيح ؛
checkdata (e) ؛
} ،
Mousemove: Function (E) {
if (temp_draw) {
obj.drawline ({
Strokestyle: '#000' ،
السكتة الدماغية: 3 ،
x1: temp_e.pagex-$ ('canvas'). الإزاحة (). اليسار ، y1: temp_e.pagey-$ ('canvas'). الإزاحة (). TOP ،
x2:
}) ؛
}
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"). على ("انقر" ، دالة () {
maxx = -1 ؛
maxy = -1 ؛
minx = 99999 ؛
miny = 99999 ؛
obj.clearcanvas () ؛
}) ؛
$ ("#save"). on ("Click" ، function () {
var image = obj.getCanvasimage ("png") ؛
تنبيه (صورة) ؛
}) ؛
}) ؛
</script>
</head>
<body>
<type type = "button" value = "Save" />
<type type = "button" value = "clear" />
<br/>
<Canvas> </tanvas>
<viv> </viv>
</body>