| 标题 | HTML5 canvas画图并保存成图片的jcanvas插件 |
| 范文 | 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(x<minX){ minX=x; } if(y>maxY){ maxY=y; }else if(y<minY){ 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'></canvas> <div id="points"></div> </body> |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。