Plug-in jcanvas pour dessiner sur un canevas HTML5 et l'enregistrer en tant que tutoriel Picture_html5

复制代码

代码如下:

<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>temp_e=e; <br>checkData(e); mouseup:function(e){ <br>temp_e=null; <br>temp_draw=false; <br>checkData(e); <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>$("#save").on("cliquez", function(){ <br>var image=obj.getCanvasImage("png"); <br>alert(image); <br><br>}); <br></script>