本申请公开了一种基于canvas的曲线绘制方法、装置、电子设备及存储介质，属于计算机绘图技术领域，其中，基于canvas的曲线绘制方法包括：计算曲线路径中各个拟合点的点坐标；根据所述点坐标绘制带有锯齿的曲线；在所述带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。该方法通过计算曲线路径中各个拟合点的点坐标，根据点坐标绘制带有锯齿的曲线，并在带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。该方法较于比较复杂专业的图形学渲染的抗锯齿方法，曲线拟合时使用cardinal曲线，不需要计算控制点，计算量小，抗锯齿更加简单快捷，无需边缘检测即可实现抗锯齿，同样也减小了计算量，易于上手。易于上手。易于上手。
【技术实现步骤摘要】
基于canvas的曲线绘制方法、装置、电子设备及存储介质
[0001]本申请属于计算机绘图
，具体涉及一种基于canvas的曲线绘制方法、装置、电子设备及存储介质。
技术介绍
[0002]随着互联网的普及，在网页上模拟人们用笔在纸上书写行为的需求(比如实时草稿纸，手写板，直播课老师在PPT上标注等)也变得越来越普遍，但真正实现出一条可以实时绘制的平滑曲线，并像写字一样有压力变化，却没有一个完整的方案。
[0003]Canvas是HTML中一个稳定的2D绘图API，大多数浏览器(甚至是ie9beta版)都支持它，它可以直接在web浏览器中绘制任何东西，而不需要使用Flash或Java等插件。本质上，浏览器会在屏幕上给canvas一个矩形区域，可以在其中绘制线条、形状、图像、文本等。Canvas是用来绘制像素的，它没有形状或向量的概念，并且官方没有给出具体的抗锯齿方案。
[0004]锯齿(aliasing)是由于采样不足造成的，从图形渲染方面宏观来看，锯齿可以分为几何锯齿和着色锯齿两类。对几何覆盖函数的采样不足，就会产生几何锯齿。着色锯齿一般发生在着色阶段，对渲染方程的采样不足。因为渲染方程也是一个连续函数，对某些部分在空间变化较快采样不足也会造成锯齿，反映在视觉上一般是图像闪烁或者噪点。在canvas中绘制曲线需要解决的就是几何锯齿。
[0005]由于canvas的绘制都是通过一个一个方形的像素点着色来实现的，抗锯齿的选择也很局限，如果想要使用MSAA或FXAA，则先需要进行边缘检测，这又是额外的计算开销。
技术实现思路
[0006]本申请的目的是提供一种基于canvas的曲线绘制方法、装置、电子设备及存储介质以解决现有基于canvas绘制的曲线锯齿较为明显的问题。
[0007]根据本申请实施例的第一方面，提供了一种基于canvas的曲线绘制方法，该方法可以包括：
[0008]计算曲线路径中各个拟合点的点坐标；
[0009]根据所述点坐标绘制带有锯齿的曲线；
[0010]在所述带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。
[0011]在本申请的一些可选实施例中，所述计算曲线路径中各个拟合点的点坐标，包括：
[0012]获取cardinal曲线的取样点；
[0013]对每个公共点引入尖锐程度的控制值；
[0014]基于所述控制值计算每个点的斜率，得到曲线路径中各个拟合点的点坐标。
[0015]在本申请的一些可选实施例中，当取样点为四个时，所述基于所述控制值计算每个点的斜率，是通过下式计算得到：
[0016]p(0)＝p
k
[0017]p(1)＝p
k+1
[0018][0019][0020]其中，p
k
‑1，p
k
，p
k+1
，p
k+2
,代表控制点的坐标，k
‑
1，k+1，k+2代表控制点的前后位置关系；p
’
(0)代表第一段曲线的斜率，p
’
(1)代表第二段曲线的斜率；
[0021]所述曲线路径中各个拟合点的点坐标是通过下式得到：
[0022][0023]其中，u为自变量，取值范围为0到1，取值区间前闭后闭。
[0024]在本申请的一些可选实施例中，头结点和尾结点的斜率通过下式计算得到：
[0025][0026]p
k
‑2(y)＝K
·
p
k
‑2(x)
‑
K
·
p
k
‑1(x)+p
k
‑1(y)
[0027]其中，斜率k的取值如下式：
[0028][0029]其中，p
k
‑1(x)，p
k
‑1(y)分别代表控制点k
‑
1的x,y坐标，p
k
‑2(x)，p
k
‑2(y)分别代表控制点k
‑
2的x,y坐标。
[0030]在本申请的一些可选实施例中，所述尖锐程度的控制值为0。
[0031]在本申请的一些可选实施例中，在所述基于所述控制值计算每个点的斜率之后，所述基于canvas的曲线绘制方法还包括：
[0032]获取采样点的压力值；
[0033]根据所述压力值通过线性插值得到各个拟合采样点的压力值。
[0034]在本申请的一些可选实施例中，所述采样点包括直接采样点和头尾点；
[0035]所述直接采样点的压力值是通过监听canvas元素的点击事件得到的每一个点击点的压力值；
[0036]所述头尾点的压力值是通过下式得到：
[0037]p
k
‑2(pres)＝p
k
‑1(prgs)+[p
k
‑1(pres)
‑
p
k
(pres)][0038]其中，p
k
(pres)代表控制点k的压力值，取值范围[0
‑
1]，k
‑
1,k
‑
2同理。
[0039]根据本申请实施例的第二方面，提供一种基于canvas的曲线绘制装置，该装置可以包括：
[0040]计算模块，用于计算曲线路径中各个拟合点的点坐标；
[0041]绘制模块，用于根据所述点坐标绘制带有锯齿的曲线；
[0042]抗锯齿模块，用于在所述带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。
[0043]根据本申请实施例的第三方面，提供一种电子设备，该电子设备可以包括：
[0044]处理器；
[0045]用于存储处理器可执行指令的存储器；
[0046]其中，处理器被配置为执行指令，以实现如第一方面的任一项实施例中所示的基于canvas的曲线绘制方法。
[0047]根据本申请实施例的第四方面，提供一种存储介质，当存储介质中的指令由信息处理装置或者服务器的处理器执行时，以使信息处理装置或者服务器实现如第一方面的任一项实施例中所示的基于canvas的曲线绘制方法。
[0048]本申请的上述技术方案具有如下有益的技术效果：
[0049]本申请实施例方法通过计算曲线路径中各个拟合点的点坐标，根据所述点坐标绘制带有锯齿的曲线，并在所述带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。该方法较于比较复杂专业的图形学渲染的抗锯齿方法，曲线拟合时使用cardinal曲线，不需要计算控制点，计算量小，抗锯齿更加简单快捷，无需边缘检测即可实现抗锯齿，同样也减小了计算量，易于上手。
附图说明
[0050]图1是本申请一示例性实施例中基于canvas的曲线绘制方法流程图；
[0051]图2是本申请一示例性实施例中曲线松紧状态对比图；
...
【技术保护点】
【技术特征摘要】
1.一种基于canvas的曲线绘制方法，其特征在于，包括：计算曲线路径中各个拟合点的点坐标；根据所述点坐标绘制带有锯齿的曲线；在所述带有锯齿的曲线上覆盖预设透明度的颜色，得到平滑曲线。2.根据权利要求1所述的基于canvas的曲线绘制方法，其特征在于，所述计算曲线路径中各个拟合点的点坐标，包括：获取cardinal曲线的取样点；对每个公共点引入尖锐程度的控制值；基于所述控制值计算每个点的斜率，得到曲线路径中各个拟合点的点坐标。3.根据权利要求2所述的基于canvas的曲线绘制方法，其特征在于，当取样点为四个时，所述基于所述控制值计算每个点的斜率，是通过下式计算得到：p(0)＝p
k
p(1)＝p
k+1k+1
其中，p
k
‑1，p
k
，p
k+1
，p
k+2
,代表控制点的坐标，k
‑
1，k+1，k+2代表控制点的前后位置关系；p
’
(0)代表第一段曲线的斜率，p
’
(1)代表第二段曲线的斜率；所述曲线路径中各个拟合点的点坐标是通过下式得到：其中，u为自变量，取值范围为0到1，取值区间前闭后闭。4.根据权利要求2所述的基于canvas的曲线绘制方法，其特征在于，头结点和尾结点的斜率通过下式计算得到：p
k
‑2(y)＝K
·
p
k
‑2(x)
‑
K
·
p
k
‑1(x)+p
k
‑1(y)其中，斜率k的取值如下式：其中，p
k
‑1(x)，p
k
‑1(y)分别代表控制点k
‑
1的x,y坐标，p
k
‑2(x)，p
...
【专利技术属性】
技术研发人员：樊玉莹，
申请(专利权)人：北京粉笔蓝天科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。