canvas小画板之平滑曲线的实现案例
小编给大家分享一下canvas小画板之平滑曲线的实现案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
功能需求
项目需求:需要实现一个可以自由书写的小画板
简单实现
对于熟悉canvas的同学来说,这个需求很简单,大致逻辑如下:
1)监听事件pointerdown,pointermove,pointerup
2)标记是否拖拽画线模式变量 isDrawing,在down事件时置为true,up的时候置为false
3)使用canvas的api,设置线条样式,调用绘制线条接口lineTo方法
短短几十行代码就能实现:
<!doctypehtml> <html> <head> <metacharset=utf-8> <style> canvas{ border:1pxsolid#ccc } body{ margin:0; } </style> </head> <bodystyle="overflow:hidden;background-color:rgb(250,250,250);touch-action:none;"> <canvasid="c"width="1920"height="1080"></canvas> <script> varel=document.getElementById('c'); varctx=el.getContext('2d'); //设置绘制线条样式 ctx.strokeStyle='red'; ctx.lineWidth=1; ctx.lineJoin='round'; ctx.lineCap='round'; varisDrawing;//标记是否要绘制 //存储坐标点 letlastX,lastY; document.body.onpointerdown=function(e){ console.log('pointerdown'); isDrawing=true; lastX=e.clientX; lastY=e.clientY; }; document.body.onpointermove=function(e){ console.log('pointermove'); if(isDrawing){ draw(e.clientX,e.clientY,lastX,lastY); } lastX=e.clientX,lastY=e.clientY; }; document.body.onpointerup=function(e){ if(isDrawing){ draw(e.clientX,e.clientY,lastX,lastY); } lastX=e.clientX,lastY=e.clientY; isDrawing=false; }; functiondraw(x,y,lastX,lastY){ ctx.beginPath(); ctx.moveTo(lastX,lastY); ctx.lineTo(x,y); ctx.stroke(); } </script> </body> </html>
实现效果如下图:
以上就简单的实现了画板功能,如果要求不高的用户可以使用,但一旦遇到有点要求的用户就无法交付这种产品,仔细看是线条折线感太强。
为什么会有折线感呢?
主要原因:
我们调用的api方法lineTo是两点连线也就是直线
浏览器对鼠标事件mousemove的采集是有采集频率的,并不是每个鼠标移动经过的每一个像素点都会触发事件。
当鼠标移动的越快,那么两点之间的间隔就越远,那么折线感就更明显。
如何能绘制平滑的曲线?
canvas提供的api中是有现成接口的,贝塞尔系列的接口就能满足我们的要求,接下来我们讲一下使用二次贝塞尔曲线绘制平滑曲线。
quadraticCurveTo(cpx,cpy,x,y)
二次贝塞尔曲线接口需要四个参数,cpx,cpy是曲线的控制点,x,y是曲线终点。
有人问那曲线的起点在哪里?其实曲线的起点取决于上一操作状态,可以是moveTo的位置,或者是lineTo的位置,或者是贝塞尔的终点。
那么怎么调用quadraticCurveTo,参数怎么传呢?
我们需要找出关键位置,直接用例子告诉大家吧
1)假如我们用鼠标采集到ABCDEF六个点
2)取前面三个点ABC计算,BC的中点B1,以A为起点,B为控制点,B1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线
3)接下来计算CD的中点C1,以B1为起点,C为控制点,C1为终点,那么利用quadraticCurveTo可以绘制出这样一条贝塞尔曲线
4)以此类推,当到了最后一个点时以D1为起点,E为控制点,F为终点,结束贝塞尔绘制。
根据算法进行代码改造
OK我们介绍了具体算法的影响,那用该算法对我们前面的代码进行改造:
<!doctypehtml> <html> <head> <metacharset=utf-8> <style> canvas{ border:1pxsolid#ccc } body{ margin:0; } </style> </head> <bodystyle="overflow:hidden;background-color:rgb(250,250,250);touch-action:none;"> <canvasid="c"width="1920"height="1080"></canvas> <script> varel=document.getElementById('c'); varctx=el.getContext('2d'); //设置绘制线条样式 ctx.strokeStyle='red'; ctx.lineWidth=1; ctx.lineJoin='round'; ctx.lineCap='round'; varisDrawing;//标记是否要绘制 //存储坐标点 letpoints=[]; document.body.onpointerdown=function(e){ console.log('pointerdown'); isDrawing=true; points.push({x:e.clientX,y:e.clientY}); }; document.body.onpointermove=function(e){ console.log('pointermove'); if(isDrawing){ draw(e.clientX,e.clientY); } }; document.body.onpointerup=function(e){ if(isDrawing){ draw(e.clientX,e.clientY); } points=[]; isDrawing=false; }; functiondraw(mousex,mousey){ points.push({x:mousex,y:mousey}); ctx.beginPath(); letx=(points[points.length-2].x+points[points.length-1].x)/2, y=(points[points.length-2].y+points[points.length-1].y)/2; if(points.length==2){ ctx.moveTo(points[points.length-2].x,points[points.length-2].y); ctx.lineTo(x,y); }else{ letlastX=(points[points.length-3].x+points[points.length-2].x)/2, lastY=(points[points.length-3].y+points[points.length-2].y)/2; ctx.moveTo(lastX,lastY); ctx.quadraticCurveTo(points[points.length-2].x,points[points.length-2].y,x,y); } ctx.stroke(); points.slice(0,1); } </script> </body> </html>
在原有基础上我们用了一个数组points保存鼠标经过的点,根据算法可知绘制贝塞尔曲线至少要用三个点,绘制过程中维护points数组。
实现效果如下,可见平滑了很多!
以上是“canvas小画板之平滑曲线的实现案例”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注恰卡编程网行业资讯频道!
推荐阅读
-
html5 canvas元素使用1
-
canvas如何截取圆角图片
canvas如何截取圆角图片小编给大家分享一下canvas如何截...
-
怎么用html5的canvas跳一跳小游戏效果
怎么用html5的canvas跳一跳小游戏效果这篇文章主要介绍了怎...
-
Canvas渐进填充与透明实现图像的Mask效果怎么实现
Canvas渐进填充与透明实现图像的Mask效果怎么实现这篇文章主...
-
微信小程序canvas图片及文本适配的方法
微信小程序canvas图片及文本适配的方法这篇文章主要介绍了微信小...
-
怎么用HTML5组件Canvas实现图像灰度化
怎么用HTML5组件Canvas实现图像灰度化今天小编给大家分享一...
-
如何用html5的canvas画布绘制贝塞尔曲线
如何用html5的canvas画布绘制贝塞尔曲线这篇“如何用htm...
-
微信小程序canvas中translate怎么用
微信小程序canvas中translate怎么用本篇内容介绍了“微...
-
HTML5中怎么用Canvas实现变形
HTML5中怎么用Canvas实现变形本篇内容主要讲解“HTML5...
-
HTML5中怎么用Canvas绘制各种线条
HTML5中怎么用Canvas绘制各种线条本篇内容介绍了“HTML...