HTML5 画的简单走势图例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div style=" top:10px;left:10px; position:absolute; ">
<table id = "testtd" width="600" height="500" >
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>0</td><td>1</td></tr>
<tr><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>0</td></tr>
<tr><td>1</td><td>0</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
</table>
</div>
<canvas id="myCanvas" width="600" height="500" style="border:1px solid #c3c3c3; top:10px; left:10px; position:absolute;"></canvas>
</form>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var table1 = document.getElementById("testtd");
var TDS = table1.getElementsByTagName("td");
var cxt2=c.getContext("2d");
cxt2.strokeStyle = 'rgba(255,0,0,0.5)'; //颜色
var icount =0;
for(var i=0; i < TDS.length ; i++)
{
if (TDS[i].innerHTML == "0")
{
var H = TDS[i].offsetHeight/2;
if (icount==0){
cxt2.moveTo(TDS[i].offsetLeft,TDS[i].offsetTop + H) ;
}
else
{
cxt2.lineTo(TDS[i].offsetLeft,TDS[i].offsetTop + H) ;
}
icount = icount +1;
}
}
cxt2.stroke();
</script>
</body>
</html>