HTML5 canvas画图并保存成图片的jcanvas插件
导读：收集整理的这篇文章主要介绍了HTML5 canvas画图并保存成图片的jcanvas插件，觉得挺不错的，现在分享给大家，也给大家做个参考。 使用了jcanvas插件。 复制代码代码如下: <head> <scri...
收集整理的这篇文章主要介绍了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;
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){
minX=x;
}
if(y> maxY){
maxY=y;
} else if(yminY){
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().left, y1: temp_e.pageY-$('canvas').offset().top,
x2: e.pageX-$('canvas').offset().left, y2: e.pageY-$('canvas').offset().top,
} );
}
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").on("click",function(){
maxX=-1;
maxY=-1;
minX=99999;
minY=99999;
obj.clearCanvas();
} );
$("#save").on("click",function(){
var image=obj.getCanvasImage("png");
alert(image);
} );
} );
/script>
/head>
body>
input tyPE="button" id="save" value="保存" />
input type="button" id="clean" value="清除" />
br/>
canvas width='320' height='480' style="background:#f00"> /canvas>
div id="points"> /div>
/body>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 canvas画图并保存成图片的jcanvas插件
本文地址： https://pptw.com/jishu/585292.html