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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
CSS3 选择器 属性选择器介绍
Jan 21 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
HTML5 Canvas标签使用收录
Jul 07 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脚本的10个技巧(8)
2006/10/09 PHP
PHP Session机制简介及用法
2014/08/19 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jquery实现倒计时效果
2015/12/14 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
Node.js静态服务器的实现方法
2018/02/28 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue项目中引入Sass实例方法
2019/08/27 Javascript
Python异常学习笔记
2015/02/03 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
简单实现Python爬取网络图片
2018/04/01 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
在PyCharm的 Terminal(终端)切换Python版本的方法
2019/08/02 Python
Python编写打字训练小程序
2019/09/26 Python
python实现最短路径的实例方法
2020/07/19 Python
Python中Selenium库使用教程详解
2020/07/23 Python
初一生物教学反思
2014/01/18 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
公司离职证明标准范本
2014/10/05 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
让人瞬间清醒的句子,句句经典,字字如金
2019/07/08 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS