溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“HTML5 canvas畫圖并保存成圖片的jcanvas插件”，在日常操作中，相信很多人在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>
到此，關于“HTML5 canvas畫圖并保存成圖片的jcanvas插件”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
