jcanvas-Plug-in zum Zeichnen auf einer HTML5-Leinwand und zum Speichern als Bild_html5-Tutorial-Fähigkeiten

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