怎么用HTML5的canvas画图并保存成图片

发布时间:2022-03-07 16:16:54 作者:iii
来源:亿速云 阅读:314

本篇内容介绍了“怎么用HTML5的canvas画图并保存成图片”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

“怎么用HTML5的canvas画图并保存成图片”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. html5 canvas 画图时的bug
  2. 将HTML5 Canvas的内容保存为图片

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5 canvas

上一篇:HTML5怎么测试浏览器是否支持Canvas的方法

下一篇:HTML5+CSS3应用实例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》