HTML5 canvas画图并保存成图片的jcanvas插件
来源: 阅读:2185 次 日期:2016-07-11 10:55:45
温馨提示: 小编为您整理了“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' style="background:#f00"></canvas>

<div id="points"></div>

</body>

更多信息请查看网页制作
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map