HTML5 canvas画图并保存成图片的jcanvas插件
程序员文章站
2023-11-17 15:09:16
HTML5 canvas画图并保存成图片，下使用了jcanvas插件，具体示例如下感兴趣的朋友可以参考下... 14-01-17...
使用了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>
复制代码
代码如下:<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>
上一篇： HTML5 embed 标签使用方法介绍