更新時間：2016-02-17
html5有一個新的標(biāo)簽"canvas",顧名思義就是畫布，做來作圖，其中要在canvas上畫圖，都要經(jīng)過JavaScript來完成。
下圖是瀏覽器支持canvas情況
很明顯的現(xiàn)代瀏覽器都支持canvas，只有萬惡的IE6還是無法使用，同時IE7以上需要特殊的js庫支持。
要IE6支持canvas，首先要瀏覽器知道有這個標(biāo)簽。
也就是document.createElement('canvas');
然后寫css，讓這個新建的標(biāo)簽有基本的樣式
canvas{ display:block;}
到這一步，canvas就能在IE6下作為一個合法的標(biāo)簽使用了。
然后就是要在canvas上繪畫，
在IE中，這里指是IE678，不止是IE6，要想現(xiàn)代瀏覽器那樣繪畫，必須先引入一個js庫
文件如下，
excanvas.js
這是google上面的excanvas.js，你也可以百度一下，也能找到。
下載完文件，在頁面引入文件的時候，必須要放在頭部。也就是<head></head>中
如
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Dive Into HTML 5</title> <!--[if IE]> <script src="http://blog.163.com/yhwwen@126/blog/excanvas.js"></script> <![endif]--> </head> <body> ... </body> </html>
有一點需要注意的是，即使你已經(jīng)引入了這個庫，并不代表你就可以立即使用，如現(xiàn)代瀏覽器那樣，在IE中必須要等到頁面全部渲染完這個庫才能生效。也就是，如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML 5</title>
<!--[if IE]>
<script src="http://blog.163.com/yhwwen@126/blog/excanvas.js"></script>
<![endif]-->
</head>
<body>
<canvas id="canvas_box" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById('canvas_box');
var context = canvas.getContext('2d');
context.fillStyle="#000";
context.fillRect(0, 0, 100, 100);
</script>
</html>
在IE中會報錯，錯誤是是getContext()未定義。
正如我所說的，excanvas.js要整個頁面渲染完了才會生效的。所以我們可以這樣寫
window.onload = function(){
...//把上面canvas放進(jìn)來，就可以。
}
