這次帶給大家用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，
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是用H5的WebGL如何在同一個介面做出json和echarts圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
