HTML5 canvas画图并保存成图片的jcanvas插件


Posted in HTML / CSS onJanuary 17, 2014

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

HTML / CSS 相关文章推荐
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
详解CSS3中@media的实际使用
Aug 04 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
在HTML中引入CSS的几种方式介绍
Dec 06 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 #HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 #HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 #HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 #HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 #HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 #HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 #HTML / CSS
You might like
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
php绘制一条直线的方法
2015/01/24 PHP
分享PHP守护进程类
2015/12/30 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
Vue实现星级评价效果实例详解
2019/12/30 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python多线程之事件Event的使用详解
2018/04/27 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
基于Python实现简单学生管理系统
2020/07/24 Python
10个示例带你掌握python中的元组
2020/11/23 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
国际贸易个人求职信范文
2014/01/04 职场文书
初三学生评语大全
2014/04/24 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL