html5 canvas做手写签名,该如何解决
日期：2014-05-17 浏览次数：20650 次
html5 canvas做手写签名
我用HTML5做了一个手写签名，运行在手机浏览器上，但是画出来效果总是很粗糙，曲线不够平滑，想找大侠指教
------解决方案--------------------
自定义笔刷,使用尺寸较大的圆形.圆形可以让你的走笔圆润很多.
如果强大一些,就得一边存储轨迹点数据,一边在后台使用贝塞尔曲线进行调整,然后将调整后的数据输出到画布上.但是虽然看起来更漂亮,毕竟和手写真迹不太一样.但换个角度看,既然原笔迹不同,那么根据原笔迹利用同样规则调整过的字迹一般也不太相同的.
------解决方案--------------------
牛人。。。顶了。。。。
------解决方案--------------------
你要查看下 平滑绘制线段 的内容
在你的线段的 实际像素点的 边缘 要增加边界色像素点 这样视觉可以有平滑的感觉
具体算法你要搜索下 应该不难 就是 麻烦点
我用HTML5做了一个手写签名，运行在手机浏览器上，但是画出来效果总是很粗糙，曲线不够平滑，想找大侠指教
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
</head>
<body>
<canvas id='simple' width='600px' height='600px'>浏览器不支持canvas</canvas>
<script>
var canvas=null,context=null;
function resetCanvas(){
canvas=document.getElementById('simple');
context=canvas.getContext('2d');
}
$(document).ready(function(){
resetCanvas();
canvas.addEventListener('touchstart',function(evt){
evt.preventDefault();
context.beginPath();
context.moveTo(evt.touches[0].pageX,evt.touches[0].pageY);
},false);
canvas.addEventListener('touchmove',function(evt){
context.lineTo(evt.touches[0].pageX,evt.touches[0].pageY);
context.stroke();
},false);
canvas.addEventListener('touchend',function(evt){
},false);
});
</script>
</body>
</html>
------解决方案--------------------
自定义笔刷,使用尺寸较大的圆形.圆形可以让你的走笔圆润很多.
如果强大一些,就得一边存储轨迹点数据,一边在后台使用贝塞尔曲线进行调整,然后将调整后的数据输出到画布上.但是虽然看起来更漂亮,毕竟和手写真迹不太一样.但换个角度看,既然原笔迹不同,那么根据原笔迹利用同样规则调整过的字迹一般也不太相同的.
------解决方案--------------------
牛人。。。顶了。。。。
------解决方案--------------------
你要查看下 平滑绘制线段 的内容
在你的线段的 实际像素点的 边缘 要增加边界色像素点 这样视觉可以有平滑的感觉
具体算法你要搜索下 应该不难 就是 麻烦点
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
