[发明专利]一种用于web页面3D动态展示文字的方法

说明书

本发明涉及web设计技术领域，尤其是一种用于web页面3D动态展示文字的方法，其步骤为：(1)在指定区域内，以指定点为中心设定指定距离为透视距离：(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；(4)以设定好的旋转角度和旋转速度旋转整体显示内容；(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见，本发明文本大小、文本之间的间距、移动的方向、移动的速率和3D视点的距离都可以以参数的形式进行不同的配置，以达到不同的视觉效果。

技术领域

本发明涉及web设计技术领域，具体领域为一种用于web页面3D动态展示文字的方法。

背景技术

在已有的实现中有在web页面指定大小区域中2D展示随机字体大小的文本，也有在指定大小区域内3D展示文本，也有在指定大小区域内动态移动文本的。但是在web页面中的指定大小区域内要可以随机的展示文本语句，并且要动态的3D视角的流畅的切换文本的位置的实现并未全部满足。

发明内容

本发明的目的在于提供一种用于web页面3D动态展示文字的方法，以解决现有技术中在web页面中的指定大小区域内要可以随机的展示文本语句，并且要动态的3D视角的流畅的切换文本的位置的实现并未全部满足的问题。

为实现上述目的，本发明提供如下技术方案：一种用于web页面3D动态展示文字的方法，其步骤为：

(1)在指定区域内，以指定点为中心设定指定距离为透视距离：

(2)为每一个需要显示的文本语句计算其以设定好的中心点的显示位置；

(3)以正对面的反面的中心点为开始点，径向的向外设置文本的透明渐变值；

(4)以设定好的旋转角度和旋转速度旋转整体显示内容；

(5)在整个过程中，需要控制显示文本的长度及大小以保证文本语句在区域内的正常显示并清晰可见。

优选的，根据步骤(3)，以避免正面的文本语句与反面的文本语句发生重叠影响视觉效果。

优选的，根据步骤(4)，在旋转的过程中需要实时重新计算处于反面的文本语句的透明渐变值。

优选的，根据步骤(5)，使用translate3D技术调用GPU计算渲染来保证动画的流畅性。

优选的，文本语句的显示位子需要根据设定好的文本大小和文本语句的设定间距来计算。

优选的，位置计算公式：

单个文本的三维坐标：

x＝radius*Math.cos(theta)*Math.sin(phi)；

y＝radius*Math.sin(theta)*Math.sin(phi)；

z＝radius*Math.cos(phi)；

其中radius为半径，theta和phi为处理过的随机值。

优选的，单个文本的相对显示区域左上角的位置：

left＝item.x+area.offsetWidth/2-item.offsetWidth/2+'px'；

top＝item.y+area.offsetHeight/2-item.offsetHeight/2+'px'；

其中item为单个文本，area为显示区域。