详解二次贝塞尔曲线quadraticCurveTo画法 |
您所在的位置：网站首页 › k曲线是什么意思 › 详解二次贝塞尔曲线quadraticCurveTo画法 |
详解二次贝塞尔曲线quadraticCurveTo画法
|
关于二次贝赛尔曲线
二次贝赛尔曲线是Canvas里面的内容，实际上说的简单点就是一个曲线的画法，除了二次之外，还有三次贝赛尔曲线，使用方法都差不多，我们这里就简单的介绍一下。 其实关于Canvas中的绘画最重要的就是笔画之前的连接，如果笔画之间不分隔清楚那么会对后续的绘画造成一个比较致命的问题。 回到二次贝赛尔曲线，对于这个曲线的画法，最重要的是确定三个点的位置。 一、开始点的坐标（使用方式通常是使用的moveTo来进行移动） 二、拉扯点的坐标，也经常叫做控制点的坐标 三、结束点的坐标 我们这边做一个简单的说明 起始点和结束点的坐标我们都很好理解，那么拉扯点的坐标呢，我们可以理解为，有一个力向下压，然后这条线就会慢慢的变得弯曲，弯曲到某一个坐标点然后就不再弯曲，那么这个点就是我们的拉扯点，三点确定了我们这样一条曲线。 当拉扯点满足某些条件的时候，与起始点和结束点形成的就是一条直线。 以下写个代码的例子： //引用了jquery var canvas = $('#canvas')[0]; item = canvas.getContext('2d'); item.strokeStyle = 'rgb(188,219,236)';//描框颜色 item.moveTo(20,20)//起始点位置 item.quadraticCurveTo(50,200,200,20);//拉扯点和结束点位置坐标 item.stroke();//开始描框结果展示：
|
【本文地址】