首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

html5 canvas做手记签名

2012-11-14 
html5 canvas做手写签名我用HTML5做了一个手写签名,运行在手机浏览器上,但是画出来效果总是很粗糙,曲线不

html5 canvas做手写签名
我用HTML5做了一个手写签名,运行在手机浏览器上,但是画出来效果总是很粗糙,曲线不够平滑,想找大侠指教

HTML code
 <!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>


[解决办法]
自定义笔刷,使用尺寸较大的圆形.圆形可以让你的走笔圆润很多.
如果强大一些,就得一边存储轨迹点数据,一边在后台使用贝塞尔曲线进行调整,然后将调整后的数据输出到画布上.但是虽然看起来更漂亮,毕竟和手写真迹不太一样.但换个角度看,既然原笔迹不同,那么根据原笔迹利用同样规则调整过的字迹一般也不太相同的.
[解决办法]
牛人。。。顶了。。。。
[解决办法]
你要查看下 平滑绘制线段 的内容
在你的线段的 实际像素点的 边缘 要增加边界色像素点 这样视觉可以有平滑的感觉

具体算法你要搜索下 应该不难 就是 麻烦点

热点排行