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实现炫酷的飞机起飞动画
Sep 17 HTML / CSS
css3之UI元素状态伪类选择器实例演示
Aug 11 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
Jun 17 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
详解flex:1什么意思
Jul 23 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
php下获取http状态的实现代码
2014/05/09 PHP
php编程每天必学之表单验证
2016/03/01 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
微信小程序实现日历签到
2020/09/21 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
护士自我鉴定范文
2013/10/06 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
观后感的写法
2015/06/19 职场文书
Python Pandas 删除列操作
2022/03/16 Python