多个canvas画圆的问题

采用以下代码画圆：
页面文件：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="xx.js"></script>
<style type="text/css">
div{
width:120px;
height:120px;
border:1px solid black;

}
</style>
</head>
<body onload="init()">
<div><canvas id="c1" width="100px" height="100px" /></div>
<div><canvas id="c2" width="100px" height="100px" /></div>
<div><canvas id="c3" width="100px" height="100px" /></div>
</body>
</html>
js文件:
/*
** @fileName xx.js
*/
function init(){
    document.getElementById('c1').onclick = paint;
    document.getElementById('c2').onclick = paint;
    document.getElementById('c3').onclick = paint;
}
function paint(){
    var context = this.getContext("2d");
    var canvasWidth = this.width,
            canvasHeight = this.height,
            cx = canvasWidth/2,
            cy = canvasHeight/2;   
             var speed = 100,
            step = Math.PI/90;
            start = begin = 0;
            end = start + step,
            len = this.width > this.height ? this.width:this.height,
            r = Math.round(len/3);
    context.beginPath();
    context.moveTo(cx,cy);
    var timer = setInterval(function(){
        
        context.arc(cx,cy,r,start,end,false);
context.fill();
        start = end;
        end += step;
        if(end >= 2*Math.PI){
            clearInterval(timer);
        }
    },100);
}只是画一个圆没有问题，但是如果多个圆（2个及以上）同时绘画就会出现问题。先开始绘画的圆将在后面的圆开始绘画的时候停了下来，直到所有的圆滑过的角度一样，才一起开始。
为什么会出现这种“干扰”？怎样才能让各个圆独立绘画？

解决方案 »

  1.   

    canvas我以为是HTML5呢，有意思， 怎么在IE6下没有画圆啊，在FF下可以画
      

  2.   


    /*
    ** @fileName xx.js
    */
    function init(){
        document.getElementById('c1').onclick = paint;
        document.getElementById('c2').onclick = paint;
        document.getElementById('c3').onclick = paint;
    }
    function paint(){
        var context = this.getContext("2d");
        var canvasWidth = this.width,
                canvasHeight = this.height,
                cx = canvasWidth/2,
                cy = canvasHeight/2;   
                 var speed = 100,
                step = Math.PI/90;
               var start = begin = 0;
               var end = start + step,
                len = this.width > this.height ? this.width:this.height,
                r = Math.round(len/3);
        context.beginPath();
        context.moveTo(cx,cy);
        var timer = setInterval(function(){
            
            context.arc(cx,cy,r,start,end,false);
        context.fill();
            start = end;
            end += step;
            if(end >= 2*Math.PI){
                clearInterval(timer);
            }
        },100);
    }
    这样就可以了，在17,18行加了个var
      

  3.   


    +
    var 没有申明，值共享了
      

  4.   

    杯具！犯错误了。
      var start = begin = 0;
    begin变成全局变量了！！！Thanks！