应用HTML5的Canvas绘图曲线图的简易方式

日期:2020-10-11 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

Canvas2D自带的曲线图方式
  近期在科学研究三d柔体的测算,因此在狂补1些专业知识。常常会涉及到到1些标值剖析层面的物品,关键是曲线图的各种各样插值优化算法。忽然想起了Canvas2D自身也是能够绘图曲线图的,应用的是2次和3次的贝兹曲线图。实际上我也1直没用它的过这个方式,如今就来试试吧~
  这篇只是说说简易的曲线图绘图,咱就不说1大堆繁杂的基本原理了。更何况贝兹曲线图这物品的基本原理自身很简易,看看维基百科就可以搞清楚。实际上许多制图专用工具中的简易曲线图绘图全是应用贝兹曲线图的,假如你用过windows自带制图专用工具中的曲线图就1定不生疏。能够先拖出1条平行线,随后点一下某个部位让平行线歪曲。1刚开始的拖拽姿势便是决策曲线图的两个端点,点一下姿势便是加上正中间点。在windows自带的制图专用工具应用的是3次贝兹曲线图,你能够加上两个正中间点。贝兹曲线图和1般的多项式插值不一样,它的正中间点只是做为操纵点用的,其实不是曲线图务必历经的端点。并且它还能够做出闭曲线图。Canvas2D中有出示两个绘图曲线图的方式
    quadraticCurveTo:2次贝兹曲线图
    bezierCurveTo:3次贝兹曲线图
  线条是从当今所属部位刚开始画的,能够用moveTo方式来特定当今部位。有了曲线图的刚开始部位后,还必须正中间点和完毕部位。把这些部位座标发送给绘图涵数便可。例如2次贝兹曲线图必须1个正中间点和1个完毕部位,因此要传两个座标给quadraticCurveTo涵数。座标是由x和y构成的,也便是说这个涵数有4个主要参数。bezierCurveTo也是1样的,只是它有两个正中间点罢了。下面咱就来用用看

CSS Code拷贝內容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>   
  2. <script>   
  3. var g=canvas.getContext("2d");   
  4. //一般的平行线   
  5. g.beginPath();   
  6. g.strokeStyle="#CCC";   
  7. g.moveTo(0,0);   
  8. g.lineTo(200,0);   
  9. g.lineTo(0,200);   
  10. g.lineTo(200,200);   
  11. g.stroke();   
  12. //贝兹曲线图   
  13. g.beginPath();   
  14. g.strokeStyle="#F00";   
  15. g.moveTo(0,0);   
  16. g.bezierCurveTo(200,0, 0,200, 200,200);   
  17. g.stroke();   
  18. </script>  


这个依照Z字形的运动轨迹给定4个点,画出了一般的平行线和贝兹曲线图。这只是一般的曲线图罢了,贝兹曲线图的强大的地方是它能够画出闭曲线图,例如这样1段编码

CSS Code拷贝內容到剪贴板
  1. g.beginPath();   
  2. g.strokeStyle="#00F";   
  3. g.moveTo(100,0);   
  4. g.bezierCurveTo(⑴00,200, 300,200, 100,0);   
  5. g.stroke();  

把3次贝兹曲线图的刚开始部位和完毕部位设定到同1点上便可以画出闭曲线图。由于贝兹曲线图的插值方位并不是依照座标轴走的,因此能够绘图出闭曲线图。假如想让多项式插值绘图出闭曲线图大家就得变换主要参数,应用极座标系来进行。
  我应用的事例全是3次贝兹曲线图。实际上2次的也1样,只是少了个正中间点就画不出我要想的物品了。我就已不唠叨1大堆了,这篇那就这样= =。。