HTML5 画的简单走势图例子

最新推荐文章于 2025-07-13 12:19:32 发布

原创最新推荐文章于 2025-07-13 12:19:32 发布 · 6.6k 阅读

0 ·

CC 4.0 BY-SA版权

这篇博客展示了如何使用HTML5来绘制一个简单的走势图，通过实例代码解析了绘制过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>