canvas绘画板的实现(兼容手机)
新项目有一个需求:客户需要在订单确认的时候签名。
第一反应就是用html的canvas实现,同事一起商量了下,canvas有三个制约:
- canvas必须要用鼠标,签名会很难看;
- 手机端web app怎么实现签名?
- 签名好的canvas怎么作为图片提交到服务器?
纠结了一天,研究了下canvas,终于有了点眉目。先看看实际效果
手机端的不好截图,下面有源码可以下载。下面是源码截图(懒到一定程度了,截图吧^_^),代码都有注释,我相信读者花点时间肯定能看明白。
下面是app.js源码(太长了,不能截图了。。~~~~(>_<)~~~~)
//动态设置canvas的大小 function resizeCanvas() { $('#drawer').attr("width", $('.panel-body').width()); if(!$('.panel-body').height()){ $('#drawer').attr("height", $('.panel-body').height()); }else{ $('#drawer').attr("height", 300); } }; var canvas,board; canvas = document.getElementById('drawer'); board = canvas.getContext('2d'); var mousePress = false; var last = null; //开始绘制 function beginDraw(){ mousePress = true; } //绘制 function drawing(event){ event.preventDefault(); if(!mousePress)return; var xy = pos(event); if(last!=null){ board.beginPath(); board.moveTo(last.x,last.y); board.lineTo(xy.x,xy.y); board.stroke(); } last = xy; } //结束绘制 function endDraw(event){ mousePress = false; event.preventDefault(); last = null; } //获取位置 function pos(event){ var x,y; if(isTouch(event)){ x = event.touches[0].pageX-event.target.offsetLeft; y = event.touches[0].pageY-event.target.offsetTop; }else{ x = event.offsetX; y = event.offsetY; } return {x:x,y:y}; } //检测是touch还是mouse事件 function isTouch(event){ var type = event.type; if(type.indexOf('touch')>=0){ return true; }else{ return false; } } //清除轨迹 function clearArea() { board.setTransform(1, 0, 0, 1, 0, 0); board.clearRect(0, 0, board.canvas.width, board.canvas.height); } //转换成图片显示 function convertCanvasToImage() { var image = canvas.toDataURL("image/png"); $('#image').html("<img src='"+image+"' alt='from canvas'/>"); } //生成图片并上传到服务器 function UploadPic() { var Pic = canvas.toDataURL("image/png"); Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") $.ajax({ type: 'POST', url: 'url', data: '{ "imageData" : "' + Pic + '" }', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { console.log("图片上传成功"); }, error: function(msg) { alert("需要服务器资源"); } }); } board.lineWidth = 2; board.strokeStyle="#000"; board.lineJoin = "round"; canvas.onmousedown = beginDraw; canvas.onmousemove = drawing; canvas.onmouseup = endDraw; canvas.addEventListener('touchstart',beginDraw,false); canvas.addEventListener('touchmove',drawing,false); canvas.addEventListener('touchend',endDraw,false);
ok,结束,下班~~
源码地址:canvas.rar
相关推荐
android开发:用canvas实现画板的功能。
canvas 画图板的实现
刚开始学HTML5中的canvas,实现的一个简易的画板。(只注重了功能的实现,没有对样式添加太多)
HTML5 canvas多功能涂鸦画板绘图代码基于jquery-1.10.2.js制作,有直线、矩形、圆圈、铅笔、多边形 、橡皮、描边、新建 、清空、撤销、保存、剪切、复制等功能。
08 - HTML5 Canvas 实现彩虹画笔绘画板.rar
用html5的canvas实现的一个简易的画板,可以画直线、矩形、圆形,可以选择线条粗细和线条颜色’
涂鸦板 html5实现涂鸦板canvas 画布实现
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas 移动端画板批注pdf预览 用了get请求pdf文件,服务器下运行才会生效 画板移动端下才生效
html5 canvas绘图板,实现了如下功能: 1、调色(只有固定的几种颜色)、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
这是一个利用H5中canvas制作的一个画板,包括铅笔,橡皮,各种几何图形等多种功能。
js+h5_canvas制作的绘画板,很强大,很好用,适合学习
Clean canvas bootstrap 模板,12美金一个的
html5基于canvas实现的带工具台绘画板特效源码.zip
前端代码 博文链接:https://lfwer.iteye.com/blog/2414822
H5页面通过canvas_sign实现手机签名功能 canvas 电脑及手机端签名实现 电子签名
使用js+canvas绘图,结合svg图形,实现标尺栏和网格效果。
HTML5 canvas实现的画板功能代码
2.40_Canvas与浏览器兼容性|Canvas高级内容2|Canvas图形、动画、游戏开发从入门到精通全系列课程