雖然現在html5還沒有正式發佈，但firefox 3+，chrome 2.0+，safari 4等都已經支持，
ie也可以通過擴展支持該功能
關於canvas的簡單介紹可以參看這裏，其中有很多很好的鏈接：
[url]http://en.wikipedia.org/wiki/Canvas_element[/url]
html5草稿版中對canvas的定義可以參看這裏：
[url]http://www.w3.org/TR/2009/WD-html5-20090825/the-canvas-element.html[/url]
Mozilla的相關頁面見這裏：
[url]https://developer.mozilla.org/en/Canvas_tutorial[/url]
其中對ie的擴展有2種，我試用了一下google的：
[url]http://code.google.com/p/explorercanvas/[/url]
作爲試手，我做了一個畫2次曲線的頁面，運行效果如下圖：
[img]http://dl.iteye.com/upload/attachment/208425/72df5f1b-3450-37d8-b4d2-c344b657b757.jpg[/img]
其中可以調整a,b,c三個係數，可以指定橫豎座標軸的最大值，步數指的是橫座標的採樣數，
爲了保證左右一樣，輸入值爲半邊的採樣數。
代碼如下，我在firefox3.5.8，chrome 5.0， ie8裏都跑過，其中ie8要用到google的explorercanvas，
輸入值有效性檢查之類的一併忽略，呵呵。
<html>
<head>
<title>learn canvas 001</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script type="text/javascript">
var MAX_WIDTH = 640;
var MAX_HEIGHT = 480;
function init() {
var g = getCanvasContext();
g.translate(MAX_WIDTH/2, MAX_HEIGHT/2);
initGraph();
}
function initGraph() {
var g = getCanvasContext();
g.strokeStyle = 'black';
if (g) {
g.clearRect(-MAX_WIDTH/2, -240, MAX_WIDTH, MAX_HEIGHT);
g.strokeRect(-MAX_WIDTH/2, -240, MAX_WIDTH, MAX_HEIGHT);
g.beginPath();
g.moveTo(-MAX_WIDTH/2, 0);
g.lineTo(MAX_WIDTH/2, 0);
g.moveTo(0, -MAX_HEIGHT/2);
g.lineTo(0, MAX_HEIGHT/2);
g.stroke();
}
}
function draw() {
initGraph();
var maxX = Number(document.getElementById('maxX').value);
var maxY = Number(document.getElementById('maxY').value);
var halfStep = Number(document.getElementById('halfStep').value);
var g = getCanvasContext();
if (g) {
var x, y;
var sx, sy;
var currStep;
sx = -MAX_WIDTH/2
sy = -MAX_HEIGHT/2 * calculateY(-maxX) / maxY;
g.beginPath();
g.moveTo(sx, sy);
for (currStep=-halfStep + 1; currStep<=halfStep; currStep++) {
x = maxX * currStep / halfStep;
y = calculateY(x);
sx = MAX_WIDTH/2 * x / maxX;
sy = -MAX_HEIGHT/2 * y / maxY;
g.lineTo(sx, sy);
}
g.strokeStyle = 'blue';
g.stroke();
}
}
function calculateY(x) {
var a = Number(document.getElementById('a').value);
var b = Number(document.getElementById('b').value);
var c = Number(document.getElementById('c').value);
var y = a * x * x + b * x + c;
return y;
}
function getCanvasContext() {
var c = document.getElementById('myCanvas');
if(c && c.getContext) {
var g = c.getContext('2d');
return g;
} else {
return null;
}
}
</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="640" height="480">
該瀏覽器不支持Canvas.
</canvas>
<p>
<table>
<tr>
<td colspan="2">
函數 = <input type="text" id="a" size="2" value="1"/> * x * x + <input type="text" size="2" id="b" value="2"/> * x + <input type="text" size="2" id="c" value="3"/>
</td>
</tr>
<tr>
<td>最大橫座標:</td>
<td><input type="text" id="maxX" value="10"/></td>
</tr>
<tr>
<td>最大縱座標:</td>
<td><input type="text" id="maxY" value="200"/></td>
</tr>
<tr>
<td>二分之一總步數:</td>
<td><input type="text" id="halfStep" value="20"/></td>
</tr>
<tr>
<td colspan="2"><button name="btnDraw" type="button" onClick="draw()">Draw</button></td>
</tr>
</table>
</body>
</html>