这次给大家带来用h5的webgl如何在同一个界面做出json和echarts图表，用h5的webgl在同一个界面做出json和echarts图表的注意事项有哪些，下面就是实战案例，一起来看一下。
突然有个想法，如果能把一些用到不同的知识点放到同一个界面上，并且放到一个盒子里，这样我如果要看什么东西就可以很直接显示出来，而且这个盒子一定要能打开。我用ht实现了我的想法，代码一百多行，这么少的代码能实现这种效果我觉得还是牛的。
这个例子最基础的就是最外层的盒子了，所以我们先来看看如何实现它：
var box = new ht.csgbox();
datamodel.add(box);
用ht可以很轻易地实现这个盒子，在ht中封装了很多基础图元类型，我们经常用到的ht.node也是其中一个，这样我们可以不用反复地写相同的代码来完成基础的实现。
这个例子中用的封装好的基础图元是ht.csgbox，一个盒子模型，可以参考ht for web 建模手册，我们在手册中可以看到，在csgbox中我们只能操作这个盒子的各个面，如果你想要自己设置一些特殊的功能，只需要操作ht.style（ht for web 风格手册）即可。
要想实现在盒子上的一个面上添加贴图，我能想到的只有ht封装的ht.default.setimage函数了。
这边我实现的方法是参考ht的editor来运作的，重新声明一个graphview组件和一个datamodel数据模型，然后通过ht.default.xhrload方法调用json，在方法中用ht.default.parse将text转成json格式，然后反序列化将json里面的内容展现成可视化的界面，再设置动画，再立即刷新用到这个json的界面，否则就算设置了动画，画面也不会改变。
ht.default.xhrload('displays/demo/pump.json', function(text){
const json = ht.default.parse(text);
pumpdm.deserialize(json);
var currentrotation = 0;
var lasttime = new date().gettime();
setinterval(function(){
var time = new date().gettime();
var deltatime = time - lasttime;
currentrotation += deltatime * math.pi / 180 * 0.3;
lasttime = time;
pumpdm.getdatabytag('fan1').setrotation(currentrotation);
pumpdm.getdatabytag('fan2').setrotation(currentrotation);
box.iv();
// g3d.iv();这边也可以刷新g3d，但是局部刷新更省
pumpgv.validateimpl();
}, 10);
}, 10);
这个时候我不能把pumpgv和g3d都加到底层div上，并且我的意图是把pumpgv加到g3d中的csgbox中的一面上，所以为了让pumpgv显示出来 必须设置pumpgv的宽高，而这个宽高必须比我json画出来的图占的面积要大，不然显示不完整。如果想看这个宽高对显示的影响，可以自己改改看来玩玩。
pumpgv.getwidth = function() { return 600;}
pumpgv.getheight = function(){ return 600;}
pumpgv.getcanvas().dynamic = true;//设置这个是为了让canvas能动态显示
echarts图表的显示也是很基础的，只要再加上 canvas.dynamic = true，并且实时刷新gv即可。
最后，只需要将这两个回传的canvas传入ht.default.setimage中即可：
ht.default.setimage('echart', charts(option));
ht.default.setimage('pump', pumpgv.getcanvas());
ht.default.drawimage函数生成新的图实际上就是在canvas上画图，所以我们只要把我们已经画好的canvas传到ht.default.setimage就可以生成图片了。
有一点需要改进的，我们可以看到盒子上的线段，图形，文字周边都有一圈的锯齿，因为我们在设置字体时，同时设置了半透明，在处于半透明的情况下“blend”样式会被关闭，这个时候我们就没法控制样式了，一般有透明度的时候需要将“all.transparent”设置为true，
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
如何用html的title属性实现鼠标悬停显示文字
怎样使用a标签的href属性与onclick事件
input输入框中的光标大小显示不一致应该怎么解决
以上就是用h5的webgl如何在同一个界面做出json和echarts图表的详细内容。