要在網(wǎng)絡(luò)上創(chuàng)建的圖形應(yīng)用程序，HTML-5提供了一套豐富的功能，如2D畫布，WebGL，SVG，CSS3D變換和SMIL。要編寫WebGL的應(yīng)用程序，我們可以使用HTML-5現(xiàn)有的canvas元素。本章提供了HTML-52D canvas元素的概述。

HTML5 Canvas

HTML-5<canvas>提供了一個(gè)簡(jiǎn)單而強(qiáng)大的選項(xiàng)來(lái)使用 JavaScript 繪制圖形。它可以用來(lái)繪制圖形，使照片組合，或做簡(jiǎn)單的(和不那么簡(jiǎn)單的)動(dòng)畫。

這是一個(gè)簡(jiǎn)單的<canvas>元素只有兩個(gè)特定的屬性：width和height，以及所有HTML5元素有核心的屬特，例如像：id，name和class。

語(yǔ)法

HTML畫布<canvas>標(biāo)記的語(yǔ)法如下所示。要提到這些在雙引號(hào)(“”)畫布的名稱。

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Canvas 屬性

canvas 標(biāo)簽有三個(gè)屬性，即：id, width 和 height。

Id − ID代表在文檔對(duì)象模型(DOM)canvas元素的標(biāo)識(shí)符。
Width − 表示canvas的寬度。
Height − 表示canvas的高度。

這些屬性決定 canvas 的大小。如果程序員不指定<canvas>標(biāo)簽的大小，那么瀏覽器如Firefox，Chrome瀏覽器和Web工具包，默認(rèn)情況下為canvas元素提供尺寸為300×150。

示例 - 創(chuàng)建一個(gè)Canvas

下面的代碼演示了如何創(chuàng)建一個(gè)畫布(canvas)。我們用CSS來(lái)將一個(gè)彩色邊框添加到畫布上。

<html>
   <head>
	
      <style>
         #mycanvas{border:1px solid red;}
      </style>
		
   </head>
	
   <body>
      <canvas id = "mycanvas" width = "300" height = "200"></canvas>
   </body>
	
</html>

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

HTML Context (渲染)

<canvas>最初為空。要canvas元素上顯示東西，必須使用的腳本語(yǔ)言。這個(gè)腳本語(yǔ)言應(yīng)該訪問(wèn)渲染上下文，并且繪制就可以了。

canvas元素有一個(gè)DOM方法是 getContext()，它被用來(lái)獲取呈現(xiàn)上下文和它的繪圖功能。這個(gè)方法有一個(gè)參數(shù)，上下文 2D 類型。

下面的代碼將被寫入，以獲得必要的上下文?？梢詫⒋四_本寫在body標(biāo)簽內(nèi)，如下圖所示。

<!DOCTYPE HTML>

<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "300"></canvas>
      
      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Yiibai Tutorial', 100, 100);
      </script>
      
   </body>
</html>

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

WebGL Context

HTML5畫布(Canvas)也用于寫WebGL的應(yīng)用程序。要?jiǎng)?chuàng)建canvas元素使用WebGL來(lái)渲染，應(yīng)該可傳遞 experimental-webgl，WebGL，而不是2D到 canvas.getContext()方法。有些瀏覽器只支持“WebGL”。

<!DOCTYPE html>

<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
	
</html>

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

上一篇：WebGL著色器下一篇：WebGL交互式立方體

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

Html5 Canvas介紹

HTML5 Canvas

語(yǔ)法

Canvas 屬性

示例 - 創(chuàng)建一個(gè)Canvas

HTML Context (渲染)

WebGL Context