Html5中定義了Canvas元素，可以在Canvas中繪制路徑，各種圖形，字符以及添加圖片。
1.創建Canvas
<canvas id="c" height="200" width="150"></canvas>
2.通過JS繪制圖形
<script type="text/javascript">
var c = document.getElementById('c');//取得Dom元素
var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染
context.fillStyle = "#000000";//填充顏色
context.fillRect(10,10,60,40); //繪制矩形
</script>
3.替換內容
並不是所有的浏覽器都支持canvas ，如果不支持浏覽器會忽略掉canvas元素直接渲染替換的內容
<canvas id="c" height="200" width="150">
This is a canvas //替換的內容
</canvas>
4.檢查浏覽器支持
<script type="text/javascript">
var c = document.getElementById('c');
if(c.getContext){
var context = c.getContext('2d');
... ...
}
</script>
5.一個簡單的例子
<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Canvas</title>
</head>
<body>
<canvas id="c" height="200" width="150"></canvas>
<script type="text/javascript">
var c = document.getElementById('c');//取得Dom元素
var context = c.getContext("2d");//拿到Canvas的上下文 目前好像只支持2D渲染
context.fillStyle = "#000000";//填充顏色
context.fillRect(10,10,60,40); //繪制矩形
</script>
</body>
</html>