コメント:HTML5キャンバスは写真を描き、それらを写真に保存します。 JCanvasプラグインが使用されます。具体的な例は次のとおりです。興味のある友達は以下を参照できます
JCanvasプラグインが使用されました。<head>
<スクリプトsrc = 'jquery-1.9.1.js'> </script>
<スクリプトsrc = 'jcanvas.min.js'> </script>
<! - <スクリプトsrc = 'js/jquery.mobile-1.2.0.min.js'> </script> - >
<スクリプト>
var maxx = -1;
var maxy = -1;
var minx = 99999;
var Miny = 99999;
function 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'、
strokewidth:3、
x1:temp_e.pagex-$( 'canvas')。offset()。左、y1:temp_e.pagey-$( 'canvas')。offset()。top、
x2:e.pagex-$( 'canvas')。offset()。左、y2:e.pagey-$( 'canvas')。offset()。top、
});
}
temp_e = e;
checkdata(e);
}、
MouseUp:function(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");
アラート(画像);
});
});
</script>
</head>
<body>
<入力タイプ= "ボタン"値= "Save" />
<入力型= "button" value = "clear" />
<br/>
<canvas> </canvas>
<div> </div>
</body>