请教。。。如何在canvas里面动态画线？

请教下各位大侠
小弟才学前端js
程序思路就是读取本地XML中的点坐标在canvas里面动态画出来
我现在可以把点坐标读取到并且把所有点都连起来了但是如何做到动态画出来？
我在想是不是从点1连到点2 然后每次连点后再刷新一下CANVAS啊
求大侠们帮忙
下面我贴出代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ajax Hello World</title>
<script type="text/javascript">
var xmlHttp;function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}function startRequest(){
createXMLHttpRequest();
try{
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dataPointXML1.xml", true);
xmlHttp.send(null);
}catch(exception){
alert("can't get xmlrequest data!");
}
}function handleStateChange(){
if(xmlHttp.readyState == 4){
if (xmlHttp.status == 200 || xmlHttp.status == 0){
// 取得XML的DOM对象
var xmlDOM = xmlHttp.responseXML;
// 取得XML文档的根
var x = xmlDOM.documentElement;
try{
// 取得<STROKE>结果
var STROKE = x.getElementsByTagName('STROKE');

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.beginPath();
cxt.lineWidth = 3;
cxt.lineJoin = 'round';
for(j=0;j<STROKE.length;j++){
/*for(k=0;k<10;k++){
var countTime=k;
var firstTime=STROKE[i].children[0].textContent;
//var nextTime=STROKE[j].children[0].textContent;
var nextTime=firstTime+countTime;
}*/
var points=STROKE[j];
cxt.moveTo(parseInt(STROKE[j].children[1].children[0].textContent),parseInt(STROKE[j].children[1].children[1].textContent));

for(var i=1;i<points.children.length;i++){
var Event
var point=points.children[i];
var setpoint = point.children[0].textContent
cxt.lineTo(parseInt(point.children[0].textContent),parseInt(point.children[1].textContent));
cxt.strokeStyle = '#663300';
}
//cxt.closePath();
cxt.stroke();
//cxt.save();
//cxt.restore();
//setInterval('handleStateChange()',10000);
}
}catch(exception){

}
}
}
}
</script>
</head><body onload="startRequest();">
<canvas id="myCanvas" width="1400" height="900" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
</body>
</html>

解决方案 »

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

这里贴出XML 文件
<?xml version="1.0"?>
<DOCUMENT>
    <NAME>900*1440 Starter Notebook</NAME>
    <PAGE>
        <PAGENUM>1</PAGENUM>
        <TITLE>900*1440 Starter Notebook</TITLE>
        <STROKE Color="#FF000000" Width="5" Height="5">
            <TIME>401848994</TIME>
            <POINT>
                <X>447</X>
                <Y>250</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>250</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>253</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>255</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>257</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>259</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>261</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>264</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>266</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>268</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>268</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>270</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>272</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>274</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>277</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>279</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>283</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>285</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>288</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>288</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>290</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>294</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>296</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>298</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>301</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>303</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>305</Y>
            </POINT>
            <POINT>
                <X>447</X>
                <Y>307</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>309</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>311</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>312</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>314</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>316</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>318</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>320</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>320</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>322</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>323</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>325</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>327</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>327</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>329</Y>
            </POINT>
            <POINT>
                <X>445</X>
                <Y>329</Y>
            </POINT>
        </STROKE>
    </PAGE>
</DOCUMENT>
可以用setTimer，每隔一段时间画个点
for(var i=1;i<points.children.length;i++){
var Event
var point=points.children[i];
var setpoint = point.children[0].textContent
cxt.lineTo(parseInt(point.children[0].textContent),parseInt(point.children[1].textContent));
cxt.strokeStyle = '#663300';
}这是一次性出图。改成用SetTimeout每隔半秒钟画一次，就可以了。
是用SetTimeout还是Setintervil
具体怎么使用啊