如何用JavaScript画动态曲线

类似于任务管理器里的动态曲线，可以用随机数让它跑动JavaScriptjavascript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

线是什么？线就是点的集合点怎么画？在指定（x，y）坐标显示一个1像素（大点也可以）的东东
你用canvas画  或者用div 模拟都可以能画点就能画直线  也能画n次曲线剩余你要随机数什么的最终就是产生一个点的集合
为什么我画的它只能跑两次，代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<canvas id="myCanvas" ></canvas>
<script type="text/javascript">
setInterval("run()",1000);
x1 = 10;
y1 = 100;
x2 = parseInt(Math.random()*100);
y2 = parseInt(Math.random()*100);
function run(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
x1= x2;
y2 = y2;
cxt.stroke();
}
</script>
<body>
</body>
</html>
剩下的直线都重叠在一起了，我想让它一次每调用一次setInterval()函数就随机画一条直线，然后全部连接成曲线求一些提示：
为什么我画的它只能跑两次，代码如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<canvas id="myCanvas" ></canvas>
<script type="text/javascript">
setInterval("run()",1000);
x1 = 10;
y1 = 100;
x2 = parseInt(Math.random()*100);
y2 = parseInt(Math.random()*100);
function run(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
x1= x2;
y2 = y2;
cxt.stroke();
}
</script>
<body>
</body>
</html>
剩下的直线都重叠在一起了，我想让它一次每调用一次setInterval()函数就随机画一条直线，然后全部连接成曲线求一些提示：
function run(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
x1= x2;
y1 = y2;
x2 = parseInt(Math.random()*100);
y2 = parseInt(Math.random()*100);
cxt.stroke();
}
你的想法应该是这样吧？
<script type="text/javascript">
    setInterval("run()",1000);
    x1 = 10;
    y1 = 100;    function run(){
        x2 = parseInt(Math.random()*100);
        y2 = parseInt(Math.random()*100);
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.moveTo(x1,y1);
        cxt.lineTo(x2,y2);
        x1= x2;
        y1= y2;
        cxt.stroke();
    }
</script>
你把初始化画布和moveto放到run函数外面去..
思路，先获取坐标数据，然后使用canvas将左边连起来就是折线图啦，canvas的使用这样就可以啦，问题还是你的坐标获取上