[发明专利]用户轨迹绘制方法、装置、计算机设备和存储介质

说明书

本申请涉及一种用户轨迹绘制方法、装置、计算机设备和存储介质。所述方法包括：通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。本申请实施例能够利用Javascript事件分发和Canvas2D绘制技术实现复杂多变的动画效果。

技术领域

本申请涉及计算机领域，特别是涉及一种用户轨迹绘制方法、装置、计算机设备和存储介质。

背景技术

目前，事件分发由canvas处理，绘制的内容的事件需要自己做处理，即canvas没有提供为其内部元素添加事件监听的方法，比如要使Canvas内的元素能够响应事件，需要通过获取点击元素的坐标范围监听并对其内元素做出改变，并且由于Canvas的绘制是静态的，因而无法实现循环重绘，上述原因导致使用canvas不能绘制复杂多变的动画，如自定义曲线，不规则多边形如圆角矩形，进而满足不了用户需求。

发明内容

本申请针对上述不足或缺点，提供了一种用户轨迹绘制方法、装置、计算机设备和存储介质，本申请实施例能够利用Javascript事件分发和Canvas2D绘制技术实现复杂多变的动画效果。

本申请根据第一方面提供了一种用户轨迹绘制方法，在一个实施例中，该方法包括：

通过JavaScript处理事件分发，利用Canvas在画布上绘制全等级轨迹，全等级轨迹包括多个等级节点和用于连接各等级节点的全等级轨迹圆弧；

根据用户成长值计算用户节点的节点坐标，根据全等级轨迹圆弧的起点坐标和用户节点的节点坐标计算用户轨迹弧度；

根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹。

在一个实施例中，利用Canvas在画布上绘制全等级轨迹，包括：

使用Canvas绘制画布；

确定圆上各等级节点的横坐标、圆心坐标和圆半径，根据各等级节点的横坐标、圆心坐标和圆半径确定各等级节点的纵坐标；

在画布上绘制各等级节点；

根据该多个等级节点中的起始等级节点的节点坐标和结尾等级节点的节点坐标确定两节点之间的弧度；

根据圆心坐标、圆半径和两节点之间的弧度，绘制圆弧连接各等级节点。

在一个实施例中，使用Canvas绘制画布，包括：

获取window变量中的devicePixelRatio属性信息；

获取canvas context中的webkitBackingStorePixelRatio属性信息；

根据devicePixelRatio属性信息和所webkitBackingStorePixelRatio属性信息计算得到缩放比例；

根据缩放比例绘制画布。

在一个实施例中，根据用户轨迹弧度，结合JavaScript的requestAnimationFrame函数绘制动态的用户轨迹，包括：

将用户轨迹弧度分成N份弧度；

通过requestAnimationFrame函数控制在下一次重绘之前执行动态弧度逻辑处理函数，以依次绘制N份弧度对应的轨迹。