什麼是HTML5？
HTML5 是用於取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML標準版本，HTML5有兩大特點，強化了 Web 網頁的表現性能和追加了本地數據庫等 Web 應用的功能。HTML5 的第一份正式草案已於 2008 年 1 月 22 日公佈，現在 HTML5 仍處於完善中。然而，大部分現代瀏覽器已經具備了某些 HTML5 支持。
Html5和IE10你應該瞭解
你一定聽說過HTML5，因爲大家都在談論它；也一定聽說過Internet Explorer 10 和 Windows 8，可能你已經體驗過了，那麼它究竟好在哪兒？究竟能帶來什麼？Internet Explorer 10 和Windows 8 是微軟即將發佈的全新操作系統和瀏覽器，其中加入了在WP8 上表現出色的Modern UI（也就是我們常說的 Metro 風格），並且之後即將發佈的 WP8 系統，都對 HTML5 有着很好的支持，並且在開發上也更加便利。
Internet Explorer 10 比較於 Internet Explorer 9 支持更多更酷的 HTML5 特性，如 application cache, Css 3D transform, web socket 等，硬件加速圖形功能也很出色，因此可以很流暢地支持 HTML5 網站。如果你的網站可以兼 Internet Explorer 10，那麼它不僅能夠在其他高級瀏覽器上運行順暢，更棒的是，對於 Windows 8 的用戶，可以直接將網站 Pin 到開始屏幕中，簡單的開發就能使網站像應用一樣獲得 Windows 8 的系統級功能支持， 如 Notification，實現與 Windows 8 的深度整合，增加更多的商業機會。
有消息稱,在微軟內部，包括Windows和IE都在採用HTML5進行開發，微軟相關負責人表示從三年前開始開發Win8時，微軟就制定了基於HTML5基礎之上的策略。從IE8開始，微軟就逐步在瀏覽器中增加對HTML5的支持。
關於IE10對CSS3樣式支持，筆者早前已經進行測試，並總結給出實例教程，詳見
詳解IE10 下CSS3 3D變換(3D transfrom)及實例教程
IE10 下CSS3選擇器及動畫(animation)效果實例教程
完美實現 IE10 下利用HTML5實現文件上傳（圖片上傳）功能
今天筆者滿懷崇敬的心情，來進行IE10下HTML5 Canvas使用和學習,本文將分爲幾部分進行講解,主要內容會涉及到:HTML5中Canvas顏色、漸變、圖像處理、繪製等
HTML5和Canvas
HTML5 增加了大量提升用戶體驗的功能標準：canvas 元素可以讓開發者在一個特定區域內繪製各種複雜圖形，同時可以用 javascript 控制你所繪的圖形的動效，使得非 flash 的豐富的視覺效果成爲可能，用戶在移動端和 PC 端可以享受到一致的視覺體驗；試想一個你曾經使用過的網絡應用程序，一個在線圖片編輯程序，你會用它做簡單的圖片處理，但絕對不會拿它代替 PhotoShop，因爲它的交互性、響應率和功能性都遠不及本地用程序。
10下Canvas繪圖入門實例
下面的這段代碼應該算是雛形，不管用HTML5的Canvas做些什麼，這些語句總是需要的，所以保存下來，要用的時候就複製一下好了。
<!DOCTYPE HTML>
<html>
<head><title>深度剖析IE10對HTML5 Canvas支持及實例教程-liwei3gjob</title></head>
<body>
深度剖析IE10對HTML5 Canvas支持及實例教程-liwei3gjob<br>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,400,300);
</script>
</body>
</html>
效果圖:
上述代碼中<canvas id="myCanvas">your browser does not support the canvas tag</canvas>，則是HTML5中新引入的Canvas元素，這個使用方法基本是固定的，給一個id方便後面的javascript調用，然後指定寬和高，畫面總要在一片小天地中展示出來，如果不指定，似乎瀏覽器會給一個默認的尺寸，往往不是我們需要的。另外，當瀏覽器不支持html的canvas標籤時，則給出提示：
現在咱用幼兒園小孩都懂的話語詳細解釋一下上面的js：首先，取出Canvas元素，使用的是DOM的getElementById方法，當然有些情況下也可以用getElementByTagName，前者簡單一些（少打很多字不是麼）。一旦取出了Canvas元素，我們得對它check一番，這個世界上總是充滿了恐怖的未知，什麼確認工作都不做會給我們帶來意想不到的麻煩。! canvas檢查是否存在這個元素，! canvas.getContext檢查瀏覽器是否支持Canvas。當不滿足上面條件的時候，這裏只是簡單的退出代碼，當然你也可以給一個漂亮點的提示。getContext方法是HTML5中新引入的Canvas的一個方法，在Internet Explorer中，是由excanvas.js預先準備好這個方法的。
getContext方法，暫時只接受一個“2d”參數，比較高級的瀏覽器有3d支持，寫作“webgl”，到時候再講了。一旦使用了這個參數，你可以認爲現在ctx中存儲了2d的context對象，或者簡單點就是一塊畫布，以後所有的繪製操作都在這塊畫布上進行。
Canvas的座標系
一、HTML5中的Canvas使用之顏色
現在爲止我們畫的圖形都是黑色的，這是Canvas繪製的默認色彩，要想換一種顏色的話，就得在實際畫之前指定顏色。
ctx.strokeStyle = color—— 指定繪製線的顏色
ctx.fillStyle = color—— 指定填充的顏色
實例源碼:
<!DOCTYPE HTML>
<html>
<head><title>liwei3gjob-深度剖析IE10對HTML5 Canvas支持及實例教程</title>
</head>
<body>
深度剖析IE10對HTML5 Canvas支持及實例教程-liwei3gjob<br>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 紅
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 綠
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
draw();
</script>
</body>
</html>
指定透明度
設定透明度有兩種方法:
1)普通方法設置
和普通的CSS中一樣，我們指定顏色的時候還可以帶一個alpha值（不過用的不多，IE9之前都不支持）。
例如:ctx.fillStyle = 'rgba(192, 80, 77, 0.7)';
2)使用全局方式設置透明度
上面我們給每一個圓加了0.7的alpha值，不過我們每個圓的alpha都是一樣的，每個都寫一遍未免有些麻煩（說是我沒覺得麻煩……只不過不這麼說就沒法引出這個新功能啊：）
ctx.globalAlpha = alpha這個參數指定了全局的alpha值，這麼設定之後，所有畫的圖案都會有這麼點的透明，除非你又特別指定了。
例如:ctx.globalAlpha = 0.7; //設置透明度
效果圖如下：
實例代碼:
<!DOCTYPE HTML>
<html>
<head><title>liwei3gjob-深度剖析IE10對HTML5 Canvas支持及實例教程</title>
</head>
<body>
深度剖析IE10對HTML5 Canvas支持及實例教程-liwei3gjob<br>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
function draw() {
var canvas = document.getElementById('myCanvas');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.globalAlpha = 0.7; //設置透明度
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 紅
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 綠
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
draw();
</script>
</body>
</html>
二、HTML5中的Canvas使用之徑向漸變
什麼是徑向漸變?
又要解釋一下什麼叫徑向漸變，其實就是環形的漸變了，由圓心（或者是較小的同心圓）開始向外擴散漸變的效果，聽着有些抽象，往下看圖一下子就明白了。線性漸變指定了起點和終點，徑向漸變則指定了開始的結束園的圓心和半徑。這裏使用createRadialGradient來獲得Canvas的CanvasGradient對象，所以addColorStop方法也是通用的。
CanvasGradient = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1)
起始的圓的圓心爲(x0, y0)半徑爲r0，終了的圓的圓心爲(x1, y1)半徑爲r1。如果半徑爲負數，INDEX_SIZE_ERR異常發生，而圓心半徑都相等的話，理所當然的，沒有漸變效果了（相信沒人會這麼做的）。的使用方法，首先是利用createRadialGradient方法指定漸變的首末圓得到CanvasGradient對象，再對這個對象使用addColorStop方法指定各個位置的顏色。最後，將CanvasGradient對象作爲fillStyle使用，反正和LinearGradient一回事兒就是了。
效果見左圖，這個“麪包圈”的中心在(70, 70)處，內部半徑爲20，外部半徑爲70。然後定義的漸變爲從小圓到大圓，分別爲紅、黃、藍。我們這裏是畫了一個矩形，但是因爲填充的是圓形，所以最終效果看起來是圓的。
Canvas標記很多年前就被當作一個新的HTML標記成員加入到了HTML5標準中。在此之前，人們要想實現動態的網頁應用，只能藉助於第三方的插件，比如Flash或Java，而引入了Canvas標記後，人們直接打通了通往神奇的動態應用網頁的大門。本教程內容只覆蓋了一小部分、但卻是非常重要的canvas標記的應用功能——圖像顯示和處理。
HTML5中的Canvas之圖像處理(本例來源自網絡,本文收集整理)
最常見的在canvas上畫圖的方法是使用Javascript Image對象。所支持的來源圖片格式依賴於瀏覽器的支持，然而，一些典型的圖片格式(png，jpg，gif等)基本上都沒有問題。
圖片可以從DOM中已經加載的元素中抓取，也可以按需即時創建。
var myImage = document.getElementById(‘myimageid’);// 或創建一個新圖片。
myImage = new Image();
myImage.src =‘image.png’;
大多數支持canvas標記的瀏覽器的當前版本中，當圖片還沒有加載完成時，如果你要去畫它，結果是什麼事情都不會發生。也就是說，如果你想畫一個圖片，你需要等它完全加載。你可以使用圖片對象的onload函數來進行判斷。
myImage = new Image();
myImage.onload =function(){
// Draw image.
}
myImage.src =‘image.png’;
在下面的所有例子中，我們的圖片源將會使用這個256×256尺寸的大猩猩。
基本繪畫
在最基本的畫圖操作中，你需要的只是希望圖像出現處的位置(x和y座標)。圖像的位置是相對於其左上角來判斷的。使用這種方法，圖像可以簡單的以其原尺寸被畫在畫布上。
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,50, 50);
ctx.drawImage(myImage,125, 125);
ctx.drawImage(myImage,210, 210);
縮放及調整尺寸
改變圖像的尺寸，你需要使用重載的drawImage函數，提供給它希望的寬度和高度參數。
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,50, 50, 100,100);
ctx.drawImage(myImage,125, 125, 200,50);
ctx.drawImage(myImage,210, 210, 500,500);
這個例子演示瞭如何畫一個比原圖小的圖像，一個不同長寬比的圖像和一個比原圖大的圖像的方法。
圖像裁剪
最後一個drawImage方法的功用是對圖像進行裁剪。
sourceX,
sourceY,
sourceWidth,
sourceHeight,
destX,
destY,
destWidth,
destHeight)
參數很多，但基本上你可以把它想成從原圖中取出一個矩形區域，然後把它畫到畫布上目標區域裏。
var ctx = canvas.getContext(’2d’);ctx.drawImage(myImage,0, 0, 50,50, 25, 25,100, 100);
ctx.drawImage(myImage,125, 125, 100,100, 125, 125,150, 150);
ctx.drawImage(myImage,80, 80, 100,100, 250, 250,220, 220);
這些就是HTML5中的canvas(畫布)標記裏進行繪圖和處理圖像的基本操作。繪圖只是canvas能提供的功能之一，將來我們會發布更多的關於這方面的教程，會介紹關於這個標記的更多的特徵和功能。如果你有任何的問題和想法，請在下面評論的寫出來
