一种基于Canvas实现的三维球体内容展示实现方法技术

本发明专利技术公开了一种基于Canvas实现的三维球体内容展示实现方法，包括以下步骤：创建空白画布，自定义画布的宽度、高度和半径，并往画布中添加自定义元素，对自定义元素进行排版，若当前画布上的元素需要定义交互事件，则自定义相应的交互事件，得到编辑过的画布，自定义相邻画布之间的偏移角度；将编辑过的画布内容转换为透明背景格式的图片，转换成的图片中的内容和大小与画布相同；将自定义的交互事件、相邻画布之间的偏移角度和转换成的图片作为相关数据一起保存到数据库中。本发明专利技术将球体的制作和展示分开，使得球体的展示能够兼容更多的终端，减少展示时的计算复杂度，提高球体展示的性能。

【技术实现步骤摘要】
一种基于Canvas实现的三维球体内容展示实现方法
本专利技术涉及视觉
，尤其涉及一种基于Canvas实现的三维球体内容展示实现方法。
技术介绍
在前端
能够使用层叠样式表来实现三维视觉效果但是很难用层叠样式表来实现三维球体视觉效果，通过HTML节点和层叠样式表无法渲染出球体模型。另外由于Canvas和层叠样式表的渲染方式不同，用层叠样式表来渲染三维视觉效果的性能较差，渲染一些场景较为复杂的页面经常出现卡顿，展示效果较差。传统的三维视觉页面的制作过程较为复杂难度较大，需要制作者具有一定的数学建模基础和熟悉Canvas接口才能够制作出三维球体效果，制作周期较长。并且模型复用率极低，每更换一次场景就需要重新编写代码，属于定制类页面。页面上很难做三维内容编辑，一个是页面的坐标为平面坐标，只有X和Y两个维度可以操作，要模拟出三维操作难度非常大，而且操作难度大，且计算复杂。随着网页技术的不断发展，大多数终端能够支持CanvasWebGL三维渲染引擎，如何提供一种高效且高性能的三维球体视觉效果制作方法，并且能够满足大多数人使用的方案成为本文档来自技高网...

【技术保护点】
1.一种基于Canvas实现的三维球体内容展示实现方法，其特征在于，包括以下步骤：/nS1：创建空白画布，自定义画布的宽度、高度和半径，并往画布中添加自定义元素，对自定义元素元素进行排版，若当前画布上的元素需要定义交互事件，则自定义相应的交互事件，得到编辑过的画布，自定义相邻画布之间的偏移角度；/nS2：将编辑过的画布内容转换为透明背景格式的图片，转换成的图片中的内容和大小与画布相同；/nS3：将自定义的交互事件、相邻画布之间的偏移角度和转换成的图片作为相关数据一起保存到数据库中；/nS4：获取数据库中的相关数据，在支持Canvas WebGL三维渲染引擎的终端上，通过Canvas接口获取We...

【技术特征摘要】
1.一种基于Canvas实现的三维球体内容展示实现方法，其特征在于，包括以下步骤：
S1：创建空白画布，自定义画布的宽度、高度和半径，并往画布中添加自定义元素，对自定义元素元素进行排版，若当前画布上的元素需要定义交互事件，则自定义相应的交互事件，得到编辑过的画布，自定义相邻画布之间的偏移角度；
S2：将编辑过的画布内容转换为透明背景格式的图片，转换成的图片中的内容和大小与画布相同；
S3：将自定义的交互事件、相邻画布之间的偏移角度和转换成的图片作为相关数据一起保存到数据库中；
S4：获取数据库中的相关数据，在支持CanvasWebGL三维渲染引擎的终端上，通过Canvas接口获取WebGL三维图像渲染引擎，初始化三维模型的绘制空间，定义球体模型的半径、原型和纹理，定义环境光源和镜头视口，创建球体模型；
S5：绘制球体模型，定义球体的位置、半径和圆心，绘制出球体纹理，将球体渲染在三维空间上；
S6：给球体模型添加旋转功能；
S7：根据球体的大小、画布大小和画布之间的偏移角度，将画布添加到球体上，根据画布间的角度，设置画布之间的角度偏移量，对画布做三维方向上的渲染，将画布内容添加到球体的对应位置上；
S8：初始化球体展示内容，在初始化时只显示球体向着终端屏幕一面0-180度范围内的内容，其他的内容在球体旋转时交替显示；
S9：从数据库中获取点击交互事件，当球体反生交互事件时，根据时间触发的位置和球体旋转的角度，计算出被点击的画布上的元素，若该元素有定义交互事件则触发相应的交互事件或者执行事件回调，如果没有则跳过；
S10：根据终端屏幕的大小调整三维绘制环境位置和视口比例。


2.根据权利要求1所述的一种基于Canvas实现的三维球体内容展示实现方法，其特征在于，所述S1中画布的宽度为2*R，高度为H，画布...

【专利技术属性】
技术研发人员：李炎庆，
申请(专利权)人：广州凡科互联网科技股份有限公司，
类型：发明
国别省市：广东;44