ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 キャンバス上に描画し、picture_html5 として保存するための jcanvas プラグイン チュートリアル スキル

HTML5 キャンバス上に描画し、picture_html5 として保存するための jcanvas プラグイン チュートリアル スキル

WBOY
WBOYオリジナル
2016-05-16 15:48:321834ブラウズ


代打
代打以下:






var maxX=-1;
var maxY=-1;
var minX=99999;
var minY=99999;
function checkData(event){
var x=event.pageX-$('canvas').offset().left;
var y=event.pageY-$('canvas').offset().top;
if(x>maxX){
maxX=x;
}else if(xminX=x;
}
if(y>maxY){
maxY=y;
}else if(yminY=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({
ストロークスタイル: '#000',
ストローク幅: 3,
x1: temp_e.pageX-$('キャンバス') .offset().left, y1: temp_e.pageY-$('canvas').offset().top,
x2: e.pageX-$('canvas').offset().left, y2: e.pageY-$('canvas').offset().top,
}
checkData(e);
Mouseup:function(e){
temp_e=null;
checkData(e);
mouseout:function(){
temp_e=null;
temp_draw=false;
}
});
$("#clean").on("click",function(){
maxX=-1;
maxY =-1;
minX=99999;
obj.clearCanvas();
$("#save").on("クリック") function(){
var image=obj.getCanvasImage("png");
alert(image)
});











声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。