要編寫(xiě)一個(gè)WebGL的應(yīng)用程序，第一步是讓W(xué)ebGL渲染上下文 - Context 對(duì)象。這個(gè)對(duì)象與 WebGL 繪制緩沖區(qū)進(jìn)行交互，可以調(diào)用所有WebGL的方法。執(zhí)行以下操作來(lái)獲取WebGL的上下文-

創(chuàng)建HTML5 canvas
獲取畫(huà)布 canvas 的 ID
獲取WebGL

創(chuàng)建HTML5 canvas元素

我們知道，建立一個(gè)HTML5 canvas 元素 -

在HTML5主體內(nèi)寫(xiě)入canvas語(yǔ)句聲明
給定 canvas 一個(gè)ID
使用高度和寬度(height & width)屬性(可選)更改畫(huà)布尺寸

一個(gè)例子在這里應(yīng)該更清楚。

示例

下面的例子說(shuō)明如何創(chuàng)建一個(gè) canvas 元素。創(chuàng)建了一個(gè)邊框使用 CSS 可視性畫(huà)布的尺寸(500×500)。復(fù)制并粘貼到下面的代碼到 my_canvas.html 文件。

<!DOCTYPE HTML>
<html>
   <head>
      <title>Canvas示例  -www.yiibai.com</title
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
	
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
	
</html>

這將產(chǎn)生以下結(jié)果 -

獲取Canvas的ID

Canvas ID是通過(guò)調(diào)用DOM(文檔對(duì)象模型)的getElementById()方法獲得的。這個(gè)方法接受一個(gè)字符串值作為參數(shù)，所以我們傳遞了當(dāng)前 Canvas 的名字。

例如，如果 canvas 名稱(chēng)是my_canvas，則canvas ID被得到 - 如圖如下

var canvas = document.getElementById('my_Canvas');

獲取WebGL的繪圖上下文

為了得到 WebGLRenderingContext 對(duì)象(或圖形的WebGL上下文對(duì)象或只在WebGL的情況下)，調(diào)用當(dāng)前 HTMLCanvasElement 的getContext()方法。getContext()的語(yǔ)法如下 -

canvas.getContext(contextType, contextAttributes);

通過(guò) WebGL字符串或experimental-webgl 作為 contentType。contextAttributes參數(shù)是可選的。 (雖然在進(jìn)行這一步，請(qǐng)確保您的瀏覽器實(shí)現(xiàn)了WebGL 1.0版本(OpenGL ES 2.0))。

下面的代碼片段展示了如何獲取WebGL的渲染上下文。在這里，gl是參考變量所獲得的上下文對(duì)象。

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

參數(shù) WebGLContextAttributes 不是強(qiáng)制性的。此參數(shù)提供接受布爾值，如下面列出各種選項(xiàng) -

Alpha	如果它的值是 true，它提供了一個(gè)alpha緩沖區(qū)到畫(huà)布上。默認(rèn)情況下，它的值是 true
depth	如果它的值是true，會(huì)得到一個(gè)繪圖的緩沖區(qū)，其中包含至少16位的深度緩沖。默認(rèn)情況下，它的值是true
stencil	如果它的值是true，會(huì)得到一個(gè)繪圖的緩沖區(qū)，其中包含至少8位的模板緩存。默認(rèn)情況下，它的值是false
antialias	如果它的值是true，會(huì)得到一個(gè)繪圖緩沖區(qū)，執(zhí)行抗鋸齒。默認(rèn)情況下，它的值是true
premultipliedAlpha	如果它的值是true，會(huì)得到一個(gè)繪圖緩沖區(qū)，其中包含的顏色與預(yù)乘alpha。默認(rèn)情況下它的值是true
preserveDrawingBuffer	如果它的值是true，緩沖區(qū)將不會(huì)被清零，直到被清除或由作者改寫(xiě)將保留它們的值。默認(rèn)情況下，它的值是false

下面的代碼片段展示了如何創(chuàng)建一個(gè)WebGL的上下文模板緩存，這將不執(zhí)行抗鋸齒。

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

在創(chuàng)建 WebGLRenderingContext 的時(shí)候，一個(gè)繪圖緩沖器被創(chuàng)建。上下文對(duì)象管理OpenGL 狀態(tài)，并呈現(xiàn)到圖形緩沖區(qū)。

WebGLRenderingContext

它是 WebGL 的主要接口。它表示 WebGL 繪圖上下文。該接口包含了所有用于在繪圖緩沖執(zhí)行各種任務(wù)的方法。此接口的屬性給出在下表中。

S.No.	屬性和說(shuō)明
1	Canvas 這是一個(gè)對(duì)創(chuàng)建此 canvas 元素的上下文
2	drawingBufferWidth 此屬性表示繪圖緩沖器的實(shí)際寬度。它可以不同于 HTMLCanvasElement 的寬度屬性。
3	drawingBufferHeight 此屬性表示繪圖緩沖器的實(shí)際高度。它可以不同于 HTMLCanvasElement 的高度屬性。

上一篇：WebGL縮放下一篇：WebGL繪制模型

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

WebGL Context上下文

創(chuàng)建HTML5 canvas元素

示例

獲取WebGL的繪圖上下文

WebGLContextAttributes

WebGLRenderingContext