Rumah > hujung hadapan web > Tutorial H5 > pemalam jcanvas untuk melukis pada kanvas HTML5 dan menyimpannya sebagai kemahiran tutorial picture_html5

pemalam jcanvas untuk melukis pada kanvas HTML5 dan menyimpannya sebagai kemahiran tutorial picture_html5

WBOY
Lepaskan: 2016-05-16 15:48:32
asal
1871 orang telah melayarinya

使用了jcanvas插件。

复制代码
代码如下;>
tg



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;
jika(x>maxX){
maxX=x;
}lain jika(xminX=x;
}
jika(y>maksY){
maksY=y;
}lain jika(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({
strokeStyle: '#000',
strokeWidth: 3,
x1: temp_e.pageX-$('canvas') .offset().kiri, y1: temp_e.pageY-$('kanvas').offset().atas,
x2: e.pageX-$('kanvas').offset().kiri, y2: e.pageY-$('canvas').offset(). atas,
});
}
temp_e=e;
checkData(e); mouseup:function(e){
temp_e=null;
temp_draw=false;
checkData(e);
temp_draw=false;
}
});
$("#clean") =-1;
minX=99999;
minY=99999; function(){
var image=obj.getCanvasImage("png");











Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan