jcanvas plug-in for drawing on HTML5 canvas and saving it as a picture_html5 tutorial skills

使用了jcanvas插件。

复制代码

代码如下:

<script> <br>var maxX=-1; <br>var maxY=-1; <br>var minX=99999; <br>var minY=99999; <br>function checkData(event){ <br>var x=event.pageX-$('canvas').offset().left; <br>var y=event.pageY-$('canvas').offset().top; <br>if(x>maxX){ <br>maxX=x; <br>}else if(x<minX){ <br />minX=x; <br />} <br />if(y>maxY){ <br>maxY=y; <br>}else if(y<minY){ <br>minY=y; <br>} <br>} <br>$(function(){ <br>var obj=$('canvas'); <br>var temp_e; <br>var temp_draw=false; <br><br>obj.on({ <br>mousedown:function(e){ <br>temp_e=e; <br>temp_draw=true; <br>checkData(e); <br>}, <br>mousemove:function(e){ <br>if(temp_draw){ <br>obj.drawLine({ <br>strokeStyle: '#000', <br>strokeWidth: 3, <br>x1: temp_e.pageX-$('canvas').offset().left, y1: temp_e.pageY-$('canvas').offset().top, <br>x2: e.pageX-$('canvas').offset().left, y2: e.pageY-$('canvas').offset().top, <br>}); <br>} <br>temp_e=e; <br>checkData(e); <br>}, <br>mouseup:function(e){ <br>temp_e=null; <br>temp_draw=false; <br>checkData(e); <br>}, <br>mouseout:function(){ <br>temp_e=null; <br>temp_draw=false; <br>} <br>}); <br>$("#clean").on("click",function(){ <br>maxX=-1; <br>maxY=-1; <br>minX=99999; <br>minY=99999; <br>obj.clearCanvas(); <br>}); <br>$("#save").on("click",function(){ <br>var image=obj.getCanvasImage("png"); <br>alert(image); <br>}); <br><br>}); <br></script>