Html 在画布中调用函数两次

实际上，我是html5新手，尝试使用canvas做一些事情，我创建的函数是从点到点绘制一个短的光线长度，问题是当我复制函数以在同一时间运行两次时，它不能正常工作，代码中的问题在哪里？ 首先，我创建画布

<canvas id="mycanvas" width="1120" height="700" style="margin:auto;border:1px solid #000000;position:relative;z-index: 10;">
    </canvas>

然后我创建一个函数，从一点到另一点绘制一条路径

function direction1(x,y , path1Number){
        //draw canvas line
            var canvas1 = document.getElementById('mycanvas');
            var context = canvas1.getContext('2d');
            var x2 = x;
            var y2 = y;
            var ini_x = x;
            var ini_y = y;
            var done = false;
            var interval = setInterval(function() {
            context.clearRect(0, 0, canvas1.width, canvas1.height);
            context.beginPath();
            context.moveTo(x, y);
            if(x2<x+20 && !done){
                context.lineTo(x2, y2);
                context.closePath();
                context.strokeStyle = 'red';
                context.stroke();
                x2+=1;
                y2+=1;
            }else{
                done = true;
                x+=1;
                y+=1;
                if(x2 >= ini_x + 91){
                    if(x2 == x){
                        clearInterval(interval);
                        context.closePath();
                        context.clearRect(0, 0, canvas1.width, canvas1.height);
                        path1Number+=1;
                        path1(x,y,path1Number);
                    }
                }else{
                    x2+=1;
                    y2+=1;
                }
                context.lineTo(x2, y2);
                context.closePath();
                context.strokeStyle = 'red';
                context.stroke();
            }
            },10);
    }

功能方向1（x、y、路径1编号）{
//画帆布线
var canvas1=document.getElementById（'mycanvas'）；
var context=canvas1.getContext（'2d'）；
var x2=x；
var y2=y；
var ini_x=x；
var ini_y=y；
var done=false；
var interval=setInterval（函数（）{
context.clearRect（0,0，canvas1.width，canvas1.height）；
context.beginPath（）；
上下文。移动到（x，y）；
如果（x2=ini_x+91）{
如果（x2==x）{
间隔时间；
closePath（）；
context.clearRect（0,0，canvas1.width，canvas1.height）；
路径1编号+=1；
路径1（x，y，路径1编号）；
}
}否则{
x2+=1；
y2+=1；
}
lineTo（x2，y2）；
closePath（）；
context.strokeStyle='red'；
stroke（）；
}
},10);
}

---

当我两次调用这个函数时出现了问题，它不能正常工作，那么原因是什么？谢谢。

请立即提出建议。.我的问题对您来说很清楚？每次调用该函数时，您都需要清除画布。因此，只应绘制最后一个。你需要计划一下操作的顺序，现在我看到你多次清理画布，如果没有演示，很难判断想要的效果是什么。我要做的是绘制和短射线在一条有起点和终点的路径中移动，它将是多条路径，在任何路径中，我调用函数以绘制特定方向的短射线，然后返回路径函数以确定其他方向的绘制顺序，我有4个方向函数将围绕菱形绘制。演示

function direction1(x,y , path1Number){
        //draw canvas line
            var canvas1 = document.getElementById('mycanvas');
            var context = canvas1.getContext('2d');
            var x2 = x;
            var y2 = y;
            var ini_x = x;
            var ini_y = y;
            var done = false;
            var interval = setInterval(function() {
            context.clearRect(0, 0, canvas1.width, canvas1.height);
            context.beginPath();
            context.moveTo(x, y);
            if(x2<x+20 && !done){
                context.lineTo(x2, y2);
                context.closePath();
                context.strokeStyle = 'red';
                context.stroke();
                x2+=1;
                y2+=1;
            }else{
                done = true;
                x+=1;
                y+=1;
                if(x2 >= ini_x + 91){
                    if(x2 == x){
                        clearInterval(interval);
                        context.closePath();
                        context.clearRect(0, 0, canvas1.width, canvas1.height);
                        path1Number+=1;
                        path1(x,y,path1Number);
                    }
                }else{
                    x2+=1;
                    y2+=1;
                }
                context.lineTo(x2, y2);
                context.closePath();
                context.strokeStyle = 'red';
                context.stroke();
            }
            },10);
    }