99久久精品国内,久久草在线视频观看,日韩亚洲欧美性感视频影片免费看

HTML5 是一個新興標準，它正在以越來越快的速度替代久經考驗的 HTML4。HTML5 是一個 W3C “工作草案” — 意味著它仍然處于開發(fā)階段 — 它包含豐富的元素和屬性，它們都支持現(xiàn)行的 HTML 4.01 版本規(guī)范。它還引入了幾個新元素和屬性，它們適用許多使用 web 頁面的領域 — 音頻、視頻、圖形、數(shù)據存儲、內容呈現(xiàn)，等等。本文主要關注圖形方面的增強：canvas。

新的 HTML5 canvas 是一個原生 HTML 繪圖簿，用于 JavaScript 代碼，不使用第三方工具?？缢?web 瀏覽器的完整 HTML5 支持還沒有完成，但在新興的支持中，canvas 已經可以在幾乎所有現(xiàn)代瀏覽器上良好運行了，但 Windows? Internet Explorer? 除外。幸運的是，一個解決方案已經出現(xiàn)，將 Internet Explorer 也包含進來。

本質上，canvas 元素是一個白板，直到您在它上面 “繪制” 一些可視內容。與擁有各種畫筆的藝術家不同，您使用不同的方法在 canvas 上作畫。您甚至可以在 canvas 上創(chuàng)建并操作動畫，這不是使用畫筆和油彩所能夠實現(xiàn)的。

本文探索新的 HTML canvas 元素，從簡單地包含一個 canvas 元素到高級 JavaScript 交互（動畫的關鍵）逐步進行演示。學習如何在一個 web 頁面上顯示 canvas。本文針對 web 設計師和開發(fā)人員，盡管 JavaScript 知識不是必須的，但理解該語言的運行方式將有所幫助。但是，HTML 知識是關鍵所在，尤其是如何創(chuàng)建一個基本 web 頁面。

要查看本文展示的示例的實時實例，您需要一個瀏覽器并能訪問 Internet。所有示例都在一個真實網站上提供（參見參考資料）。

?

瀏覽器支持

確定哪些瀏覽器支持 HTML5 和一個移動目標達到什么程度。在本文撰寫之時，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多數(shù)新的 HTML5 元素，它們都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 處于測試階段，支持 HTML5，但還有一些問題。

在此期間，有一個針對不支持 HTML5 的 Internet Explorer 版本的補丁可用。這個補丁的前提是創(chuàng)建使用 JavaScript 代碼的元素。例如，可以使用代碼段 document.createElement('canvas') 創(chuàng)建一個可識別的 Canvas 標記；但是，這并不意味著有東西經過元素本身。一個流行的解決方法是包含一個完整的基于 canvas 的 JavaScript 庫，這個庫由 Google 提供，稱為 ExplorerCanvas — 或簡稱 excanvas 。下載并將其作為一個外部文件引用，如下所示。（參見參考資料中的鏈接，了解更多 excanvas 信息。）

          <!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

通過包含 excanvas ，您向 Internet Explorer 提供 canvas 及其大多數(shù)方法。

?

創(chuàng)建您的第一個 canvas

由于 canvas 只是一個 HTML 標記，因此它的顯示方式只是包含在標記中。第一個示例（如圖 1 所示）顯示一個最簡單的 canvas。它之所以可見，是因為它通過 style 屬性獲得了一個顏色方案，通過 width 和 height 屬性獲得了其大小。

?

圖 1. 一個空白 canvas

這個頁面的代碼簡短明了，如清單 1 所示。

?

清單 1. 包含一個 canvas 的 web 頁面的 HTML

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" 
    style="background-color:blue;border: 10px yellow solid"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

這個 canvas 的寬度和高度均為 400 像素，邊框為黃色，背景為藍色。canvas 上沒有任何實際繪圖；繪圖通過屬于 canvas 的 JavaScript 方法完成。

?

canvas 方法

表 1 列示了幾個附加到 canvas 上下文的方法。

?

表 1. canvas 方法

方法用途

`getContext(contextId)`	公開在 canvas 上繪圖需要的 API。惟一（當前）可用的 `contextID` 是 `2d` 。
`height`	設置 canvas 的高度。默認值是 150 像素。
`width`	設置 canvas 的寬度。默認值是 300 像素。
`createLinearGradient(x1,y1,x2,y2)`	創(chuàng)建一個線性漸變。起始坐標為 `x1,y1` ，結束坐標為 `x2,y2` 。
`createRadialGradient(x1,y1,r1,x2,y2,r2)`	創(chuàng)建一個放射狀漸變。圓圈的起始坐標是 `x1,y1` ，半徑為 `r1` 。圓圈的結束坐標為 `x2,y2` ，半徑為 `r2` 。
`addColorStop(offset, color)`	向一個漸變添加一個顏色停止。顏色停止（color stop）是漸變中顏色更改發(fā)生的位置。offset 必須介于 0 到 1 之間。
`fillStyle`	設置用于填充一個區(qū)域的顏色 — 例如， `fillStyle='rgb(255,0,0)'` .
`strokeStyle`	設置用于繪制一根直線的顏色 — 例如， `fillStyle='rgb(255,0,0)'` .
`fillRect(x,y,w,h)`	填充一個定位于 `x` 和 `y` ，寬度和高度分別為 `w` 和 `h` 的矩形。
`strokeRect(x,y,w,h)`	繪制一個定位于 `x` 和 `y` ，寬度和高度分別為 `w` 和 `h` 的矩形的輪廓。
`moveTo(x,y)`	將繪圖位置移動到坐標 `x,y` 。
`lineTo(x,y)`	從繪圖方法結束的最后位置到 `x,y` 繪制一條直線。

?

構建更復雜的 canvas 應用程序

本小節(jié)將展示一系列示例，每個示例的功能都比前一個示例略有增加。

?

更深刻的視覺體驗

首先，將一組矩形放置到 canvas 上。記住，矩形是擁有 4 條直邊和 4 個直角的圖形，正方形是矩形的變體。圖 2 顯示 canvas 上有一系列矩形，每個矩形都比前一個略小。注意，每個矩形的顏色都不同，使其更清晰明確。

?

圖 2. 使用一些矩形填充的 canvas

清單 2 顯示了用于創(chuàng)建圖 2 中的 canvas 的代碼。每個矩形都由兩行代碼創(chuàng)建：首先， fillStyle 方法使用顏色定義的紅、綠、藍（RGB）格式定義顏色（ fillStyle='rgb(255,0,0) ）。然后， fillRect 方法（ fillRect(50,50,300,300) ）定義大小。前兩個值設置起始坐標，后兩個值設置結束坐標。

?

清單 2. 使用 JavaScript 代碼創(chuàng)建上下文并使用各種方法

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
 window.onload=function() {
   var mycanvas=document.getElementById("myCanvasTag");
   var mycontext=mycanvas.getContext('2d');
   mycontext.fillStyle='rgb(0,0,255)'; 
   mycontext.fillRect(0,0,400,400);   
   mycontext.fillStyle='rgb(255,0,0)';  
   mycontext.fillRect(50,50,300,300);    
   mycontext.fillStyle='rgb(0,255,0)';  
   mycontext.fillRect(100,100,200,200);
   mycontext.fillStyle='rgb(100,100,100)';  
   mycontext.fillRect(125,175,150,25);
 }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

要在 canvas 上繪圖，通過將 getContext('2d') 應用到 canvas 元素訪問提供方法的 API。通過這個 document.getElementById 方法，canvas 元素被設置為一個 JavaScript 變量：

          var mycanvas=document.getElementById("myCanvasTag");

然后將 getContext 應用到 canvas 元素，如下所示。

          var mycontext=mycanvas.getContext('2d');

一旦一個變量被設置到上下文，所有方法就可以使用了。

下一個示例展示如何結合兩種技術。一種是矩形重疊，方法是使用 fillRect 參數(shù)來定位矩形（見圖 3）。

?

圖 3. 向一個 canvas 上的矩形應用透明度

第二種技術是 RGB 顏色處理的變體，即添加透明度。不使用 rgb ，而是使用 rgba 。 a 表示 alpha 通道，該通道控制透明度。在圖 3 中的示例中，第二個矩形的透明度被設置為 50%（或 .5），第三個設置為 25%（或 .25）。清單 3 顯示了完整的標記。

?

清單 3. 使用透明度

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    mycontext.fillStyle='rgb(0,0,255)'; 
    mycontext.fillRect(30,30,300,300);           
    mycontext.fillStyle='rgba(0,255,0,0.5)';  
    mycontext.fillRect(60,60,300,300);    
    mycontext.fillStyle='rgba(255,0,0,0.25)';  
    mycontext.fillRect(90,90,300,300); 
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px yellow solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

漸變 — 經過協(xié)調的顏色混合 — 原生于 canvas ，通過兩種方法： createLinearGradient 和 createRadialGradient 。圖 4 展示了一個線性漸變。 addColorStop 方法定義一個顏色，以及它在漸變中變?yōu)榛顒訝顟B(tài)的位置。由于一個漸變可以擁有多個顏色停止，因此這種定位是主觀的。顏色定位值必須介于 0 到 1 之間，但測試變體和顏色停止的數(shù)量可以生成不同的結果，即使一個值（比如 .25）保持不變。換句話說，一個顏色停止可以將其位置設定為 .25，但是相關顏色可以從整個漸變路徑的四分之一處之后一點開始發(fā)生，一直持續(xù)到漸變結束，具體情況取決于您設置其他顏色停止的位置。記住，這是一個新的實現(xiàn)，可能還在改進過程中。漸變的一個好處是它們總是引人注目，無論代碼和結果是否經過完美的協(xié)調。

?

圖 4. 一個線性漸變

圖 4 中的漸變通過清單 4 中的 JavaScript 代碼創(chuàng)建。

?

清單 4. 創(chuàng)建一個線性漸變

              var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createLinearGradient(30,30,300,300);           
    mygradient.addColorStop(0,"#FF0000");
    mygradient.addColorStop(1,"#00FF00");
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);

注意，清單 4 中的顏色停止被全面實現(xiàn)為從這個方法本身創(chuàng)建的一個實時（on-the-fly）漸變的一個方法。語句 mygradient.addColorStop(0,"#FF0000") 顯示顏色停止擁有兩個參數(shù)：位置和顏色。

圖 5 展示了一個放射狀漸變。用于創(chuàng)建這個漸變的代碼與清單 4 中的代碼類似，除了使用 createRadialGradient 方法替代 createLinearGradient 方法之外。

?

圖 5. 一個放射狀漸變

用于創(chuàng)建圖 5 中的放射狀漸變的代碼如清單 5 所示。注意所有 5 個顏色停止。

?

清單 5. 創(chuàng)建一個放射狀漸變

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycanvas=document.getElementById("myCanvasTag");
    var mycontext=mycanvas.getContext('2d');
    var mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);           
    mygradient.addColorStop("0","magenta");
    mygradient.addColorStop(".25","blue");
    mygradient.addColorStop(".50","green");
    mygradient.addColorStop(".75","yellow");
    mygradient.addColorStop("1.0","red");                
    mycontext.fillStyle=mygradient;
    mycontext.fillRect(0,0,400,400);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

?

多個 canvas

一個 web 頁面能夠包含多個 canvas，每個 canvas 引用它們自己的獨特 JavaScript 上下文變量。結果，每個 canvas 都獨立于其他 canvas 工作。圖 6 展示了 4 個 canvas，每個 canvas 上的圖像都不同。

?

圖 6. 一個 web 頁面上的多個 canvas

清單 6 顯示了用于創(chuàng)建圖 6 中的頁面的代碼。注意，每個 canvas 都有一個惟一 ID 且每個上下文都是惟一的。

?

清單 6. 一個 web 頁面上的多個 canvas

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
  window.onload=function() {
    var mycontext1=document.getElementById("myCanvasTag1").getContext('2d');
    var mycontext2=document.getElementById("myCanvasTag2").getContext('2d');
    var mycontext3=document.getElementById("myCanvasTag3").getContext('2d');
    var mycontext4=document.getElementById("myCanvasTag4").getContext('2d');         
    // gradient 1
    var mygradient1=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient1.addColorStop(0,"#FF0000");
    mygradient1.addColorStop(1,"#00FF00");
    mycontext1.fillStyle=mygradient1;
    mycontext1.fillRect(0,0,100,100);
    // gradient 2   
    var mygradient2=mycontext2.createLinearGradient(30,30,90,90);           
    mygradient2.addColorStop(1,"#FF0000");
    mygradient2.addColorStop(0,"#00FF00");
    mycontext2.fillStyle=mygradient2;
    mycontext2.fillRect(0,0,100,100);

    var mygradient3=mycontext3.createLinearGradient(30,30,90,90);           
    mygradient3.addColorStop(0,"#0000FF");
    mygradient3.addColorStop(.5,"#00FFDD");
    mycontext3.fillStyle=mygradient3;
    mycontext3.fillRect(0,0,100,100);

    var mygradient4=mycontext1.createLinearGradient(30,30,90,90);           
    mygradient4.addColorStop(0,"#DD33CC");
    mygradient4.addColorStop(1,"#EEEEEE");
    mycontext4.fillStyle=mygradient4;
    mycontext4.fillRect(0,0,100,100);
  }
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag1" width="100" height="100" style="border: 10px blue solid">
</canvas>
<canvas id="myCanvasTag2" width="100" height="100" style="border: 10px green solid">
</canvas>
<br />
<canvas id="myCanvasTag3" width="100" height="100" style="border: 10px red solid">
</canvas>
<canvas id="myCanvasTag4" width="100" height="100" style="border: 10px black solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

?

JavaScript 事件和動畫

本文已經展示了可用于 canvas 的各種方法，每種方法都創(chuàng)建了一個可視結果?，F(xiàn)在我們提高一個等級，看看 canvas 如何實現(xiàn)事件和動畫。JavaScript 能夠識別許多事件，包括在一個特定 web 頁面元素上方移動或懸停鼠標。JavaScript 語言能夠識別更多事件，下面的示例將使用其中幾個。

?

整合事件

圖 7 中的示例是使用前面清單中的方法創(chuàng)建的。現(xiàn)在我們添加幾個新技術。面部的鼻子、眼睛和圓形項目以及外部邊界都使用 arc 方法創(chuàng)建。眼睫毛被繪制為線條，嘴被創(chuàng)建為一條貝賽爾曲線。圖 7 還在 canvas 底部顯示了一些文本，這是使用 fillText 方法創(chuàng)建的。

?

圖 7. 使用 JavaScript 事件繪制一張正在眨眼的臉

清單 7 顯示圖 7 使用的代碼。

?

清單 7. 使用事件創(chuàng)建一個眨眼

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
<script>
window.onload=function() {
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');

  //draw face
  mycontext.beginPath();
  mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  //draw left eye
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();

  //draw left iris
  mycontext.beginPath();
  mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();

  //draw left eyelid
  mycontext.beginPath();
  mycontext.arc(220, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();

  //draw left eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext,198, 170, 193, 185);
  lashes(mycontext,208, 177, 204, 193);
  lashes(mycontext,220, 180, 220, 195);
  lashes(mycontext,232, 177, 236, 193);
  lashes(mycontext,242, 170, 247, 185);
  mycontext.stroke();

  openeye();

  //draw right eyelashes
  mycontext.strokeStyle='rgb(0,0,0)';
  lashes(mycontext, 358, 170, 353, 185);
  lashes(mycontext, 368, 177, 364, 193);
  lashes(mycontext, 380, 180, 380, 195);
  lashes(mycontext, 392, 177, 396, 193);
  lashes(mycontext, 402, 170, 407, 185);
  mycontext.stroke();

  //draw nose
  mycontext.beginPath();
  mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.stroke();

  // draw smile
  mycontext.beginPath();
  mycontext.lineWidth = 10;
  mycontext.moveTo(180, 320);
  mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);
  mycontext.closePath();
  mycontext.stroke();

  //draw message at bottom
  mycontext.font="1em sans-serif";
  mycontext.fillStyle="rgb(0,0,0)";
  mycontext.fillText("Move the mouse over and off the canvas - the face winks!", 10, 480);
}

function lashes(cntx,x1,y1,x2,y2) {
  cntx.moveTo(x1,y1);
  cntx.lineTo(x2,y2);
}

function closeeye() {
  //close right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}

function openeye() {
  //open right eye
  var mycanvas=document.getElementById("myCanvasTag");
  var mycontext=mycanvas.getContext('2d');
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(100,100,225)';
  mycontext.fill();
  //draw right iris
  mycontext.beginPath();
  mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(0,0,0)';
  mycontext.fill();
  //draw right eyelid
  mycontext.beginPath();
  mycontext.arc(380, 150, 30, 0, Math.PI, true);
  mycontext.closePath();
  mycontext.fillStyle='rgb(200,200,200)';
  mycontext.fill();
}
</script>
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="600" height="500" style="border: 5px blue solid"
   onmouseover="closeeye()" onmouseout="openeye()"></canvas>
<br /><br />
<a href="index.html">back</a>
</div>
</body>
</html>

圖 7 中的臉通過一些 JavaScript 事件而改變。特別是， onmouseover 和 onmouseout 事件分別用于調用 closeeye() 和 openeye() 函數(shù)。這些函數(shù)不是 canvas 的方法，但是標準 JavaScript 函數(shù)。事件和函數(shù)之間的連接在 canvas 元素本身中進行。在清單 7 中，頁面的主體區(qū)域接近代碼的底部，那是 canvas 所在的位置。canvas 標記內是：

          onmouseover="closeeye()" onmouseout="openeye()"

清單 7 中出現(xiàn)了一個新的構造 — beginPath() 和 endPath() 的使用，它們用于明確區(qū)分獨立的復雜繪圖動作。封裝在其中的代碼繪制一個特殊的圖像，以分隔其他繪圖動作。

關于清單 7 中的代碼的幾個值得注意的地方列示如下：

當頁面打開時，通過調用 openeye() 函數(shù)來繪制右眼。
使用 fillText 方法將文本寫到 canvas 上。
在 arc 方法中， MATH.PI * 2 創(chuàng)建了一個完整的圓圈，而 MATH.PI 將只創(chuàng)建一個半圓（例如，眼皮）。

?

動畫

JavaScript 打包了一個強大的編程利器。這種語言能夠執(zhí)行很多操控，如清單 8 所示。這個代碼重復運行，在 canvas 上繪制一些線條。線條顏色隨機設置。

?

清單 8. 使用 JavaScript 創(chuàng)建動畫

          <!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Demo</title>
<!--[if IE]>
  <script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-left:30px;">
<canvas id="myCanvasTag" width="400" height="400" style="border: 10px blue solid">
</canvas>
<br /><br />
<a href="index.html">back</a>
</div>
<script>
  var mycanvas  = document.getElementById("myCanvasTag")
  var mycontext = mycanvas.getContext('2d');
  var x;
  var y;
  var x2;
  var y2;
  var r;
  var g;
  var b;
 function line() {
   x=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   x2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   y2=Math.floor(Math.random()*190) + Math.floor(Math.random()*190);
   r=Math.floor(Math.random()*255);
   g=Math.floor(Math.random()*255);
   b=Math.floor(Math.random()*255);
   mycontext.moveTo(x, y);
   mycontext.lineTo(x2, y2);
   mycontext.strokeStyle='rgb(' + r + ',' + g +  ',' + b + ')';  
   mycontext.lineWidth=Math.floor(Math.random()*6);      
   mycontext.stroke();
   mycontext.restore();
 }
 setInterval(line, 100);

</script>
</body>
</html>

圖 8 顯示了這個動畫的一張快照。清單 8 中的代碼與本文其他所有代碼示例都不同，因為 JavaScript 塊被放置到頁面底部，canvas 元素下方。這確保 canvas 在代碼運行之前就已經被呈現(xiàn)了。

?

圖 8. JavaScript 用于繪制無窮無盡的隨機線條

?

結束語

HTML5 被定位于用于改變 web 開發(fā)的面貌。新的元素使得頁面布局更簡單，支持通過瀏覽器存儲本地數(shù)據，擁有 canvas 之類的音頻、視頻和圖形平臺。隨著瀏覽器升級以支持更多新功能，web 的性質和用戶體驗將變得妙趣橫生。web 開發(fā)前景一片光明！

?

參考資料

學習

找到本文中的示例的實時演示。
WHATWG 是一個開發(fā)人員社區(qū)，協(xié)助 W3C 改進 HTML5。
馬上開始實現(xiàn) HTML5 。
閱讀來自 Mozilla 開發(fā)人員的 canvas 教程和演示。
PHPGuru.org 提供關于 canvas 用法的信息，以及許多很棒的演示和示例。
developerWorks Web development 專區(qū) ：通過專門關于 Web 技術的文章和教程，擴展您在網站開發(fā)方面的技能。
developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過 Web 2.0 新手入門欄目，迅速了解 Web 2.0 的相關概念。
隨時關注 developerWorks 技術活動和網絡廣播。
觀看 developerWorks 演示中心，包括面向初學者的產品安裝和設置演示，以及為經驗豐富的開發(fā)人員提供的高級功能。
查看 HTML5 專題，了解更多和 HTML5 相關的知識和動向。

獲得產品和技術

下載用于 Internet Explorer 的 excanvas.js 庫。
下載 IBM 產品評估試用版軟件或 IBM SOA 人員沙箱，并開始使用來自 DB2?、Lotus?、Rational?、Tivoli? 和 WebSphere? 的應用程序開發(fā)工具和中間件產品。

討論

加入 developerWorks 中文社區(qū) 。查看開發(fā)人員推動的博客、論壇、組和維基，并與其他 developerWorks 用戶交流。
關注 developerWorks 成員關于 web 主題的共享書簽。
快速找到答案：訪問 Web 2.0 Apps 論壇。
快速找到答案：訪問 Ajax 論壇。

原文： http://www.ibm.com/developerworks/cn/web/wa-html5canvas/

使用 HTML5 canvas 繪制精美的圖形

更多文章、技術交流、商務合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯(lián)系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

?