HTML5 canvas画图并保存成图片的jcanvas插件_html5教程技巧

使用了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>