• 售前

  • 售后

热门帖子
入门百科

使用HTML5的Canvas绘制曲线的简朴方法

[复制链接]
华为股票卖出矩 显示全部楼层 发表于 2021-10-26 13:30:26 |阅读模式 打印 上一主题 下一主题
Canvas2D自带的曲线方法
  近来在研究3D柔体的盘算,以是在狂补一些知识。经常会涉及到一些数值分析方面的东西,紧张是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用的是二次和三次的贝兹曲线。着实我也不绝没用它的过这个方法,现在就来试试吧~
  这篇只是说说简单的曲线绘制,咱就不说一大堆复杂的原理了。况且贝兹曲线这东西的原理本身很简单,看看维基百科就能明白。着实许多画图工具中的简单曲线绘制都是使用贝兹曲线的,假如你用过windows自带画图工具中的曲线就肯定不生疏。可以先拖出一条直线,然后点击某个位置让直线扭曲。一开始的拖动动作就是决定曲线的两个顶点,点击动作就是添加中间点。在windows自带的画图工具使用的是三次贝兹曲线,你可以添加两个中间点。贝兹曲线和一样平常的多项式插值差异,它的中间点只是作为控制点用的,并不是曲线必须经过的顶点。而且它还可以做出闭曲线。Canvas2D中有提供两个绘制曲线的方法
    quadraticCurveTo:二次贝兹曲线
    bezierCurveTo:三次贝兹曲线
  线条是从当前所在位置开始画的,可以用moveTo方法来指定当前位置。有了曲线的开始位置后,还必要中间点和竣事位置。把这些位置坐标传给绘制函数即可。好比二次贝兹曲线必要一个中间点和一个竣事位置,以是要传两个坐标给quadraticCurveTo函数。坐标是由x和y构成的,也就是说这个函数有4个参数。bezierCurveTo也是一样的,只是它有两个中间点而已。下面咱就来用用看

CSS Code复制内容到剪贴板
       
  • <canvas id="canvas" width="200" height="200"></canvas>      
  • <script>      
  • var g=canvas.getContext("2d");      
  • //平凡的直线      
  • g.beginPath();      
  • g.strokeStyle="#CCC";      
  • g.moveTo(0,0);      
  • g.lineTo(200,0);      
  • g.lineTo(0,200);      
  • g.lineTo(200,200);      
  • g.stroke();      
  • //贝兹曲线      
  • g.beginPath();      
  • g.strokeStyle="#F00";      
  • g.moveTo(0,0);      
  • g.bezierCurveTo(200,0, 0,200, 200,200);      
  • g.stroke();      
  • </script>  

这个按照Z字形的轨迹给定四个点,画出了平凡的直线和贝兹曲线。这只是平凡的曲线而已,贝兹曲线的锋利之处是它可以画出闭曲线,好比如许一段代码

CSS Code复制内容到剪贴板
       
  • g.beginPath();      
  • g.strokeStyle="#00F";      
  • g.moveTo(100,0);      
  • g.bezierCurveTo(-100,200, 300,200, 100,0);      
  • g.stroke();  

把三次贝兹曲线的开始位置和竣事位置设置到同一点上就可以画出闭曲线。因为贝兹曲线的插值方向不是按照坐标轴走的,以是可以绘制出闭曲线。假如想让多项式插值绘制出闭曲线我们就得转换参数,使用极坐标系来完成。
  我使用的例子都是三次贝兹曲线。着实二次的也一样,只是少了个中间点就画不出我想要的东西了。我就不再啰嗦一大堆了,这篇就如许吧= =。。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作