WebGL本身只是一個3D接口，并沒有提供任何應用層的方法。當然這就包括的文字的繪制問題，繪制其它立體圖像我們都是從圖形的數(shù)學模型中計算出的頂點數(shù)據(jù)，那文字怎么辦呢？對于文字是無法自己計算的，我們需要先得到文字的點陣，再來計算3D頂點坐標。 完整實例：WebGL簡單文本繪制（建議F11全屏查看） 這里為了方便起見使用了SimpleWebGL和它的Matrix插件。這個效果的重點在于數(shù)據(jù)的處理，使用什么WebGL庫并不重要。這只是個簡單的效果，所以我使用了簡單的方法。首先要獲取文字的點陣相關的信息，需要創(chuàng)建一個額外的Canvas在上面繪制文字。這個例子中我是直接使用貼圖的方式來做的，如果有必要也可以在JS中自己分析頂點數(shù)據(jù)做成其它模型。下面是構造貼圖部分的代碼 //創(chuàng)建Canvas，并設置大小 var text=document.createElement("canvas"); text.width=512,text.height=256; //對其繪制文字 (function(g){ //設置文字屬性 g.textBaseline="middle",g.textAlign="center"; g.font="128px 楷體",g.fontStyle="rgba(0,0,0,0.3)"; //設置文字漸變 g.fillStyle=g.createLinearGradient(0,0,text.width,0); g.fillStyle.addColorStop(0,"rgba(255,255,0,0.5)"); g.fillStyle.addColorStop(0.5,"rgba(0,255,255,0.5)"); g.fillStyle.addColorStop(1,"rgba(255,0,255,0.5)"); //繪制文字 g.fillText("次碳酸鈷",256,128); })(text.getContext("2d")); //放入Texture2D對象 new Texture2D(text,"RGBA").bind(1); 這樣貼圖數(shù)據(jù)就準備好了，然后要有一個頂點模型才能往上面貼圖呀。所以我們還需要生成一個平面或一個物體用來貼圖，這里我生成一個點陣長方體來貼圖，繪制時使用線條描繪。下面是這個長方體的生成代碼 //做出一個點陣型的長方體，用來往上面貼圖 var position=[]; (function(){ var i,j,w=1<<7,h=1<<6,k=Math.max(w,h); for(i=-w;i<=w;i++)for(j=-h;j<=h;j++) position.push(i/k,j/k,0.1, i/k,j/k,-0.1); })(); 著色器的代碼也需要看看，不過我就不介紹了。只是基本的貼圖代碼而已，在片段著色器中把頂點的坐標映射到貼圖的坐標上取顏色就行了。

網頁題目：用WebGL繪制簡單文本
鏈接URL：http://www.aaarwkj.com/news24/319024.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、標簽優(yōu)化、建站公司、外貿網站建設、網站改版、網站導航

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)