IE下线段绘制不消失问题

使用网上的画直线代码画直线在谷歌浏览器上画，再画第二条直线时第一条直接自动消失。代码如下：

function drawLine(){
    var percent = parseInt(document.getElementById("label-nLinePos").innerText);
    var canvas = document.getElementById("demoCanvas");
    canvas.width = $("#demoCanvas").width();
    canvas.height = $("#demoCanvas").height();
    var context = canvas.getContext('2d');
    var real_y = canvas.height*percent/100;
    context.moveTo(0,real_y);       //设置起点状态
    context.lineTo(canvas.width,real_y);       //设置末端状态
    context.lineWidth = 1;          //设置线宽状态
    context.strokeStyle = "#FF0" ;  //设置线的颜色状态
    context.stroke();
}

但是在IE下用这段代码时，画上了第二条直线后第一条直线并不消失。导致多条直线并存。

function drawLine(){
    var percent = parseInt(document.getElementById("label-nLinePos").innerText);
    var canvas = document.getElementById("demoCanvas");
    canvas.width = $("#demoCanvas").width();
    canvas.height = $("#demoCanvas").height();
    var context = canvas.getContext('2d');
    var real_y = canvas.height*percent/100;
    context.beginPath();
    context.moveTo(0,real_y);       //设置起点状态
    context.lineTo(canvas.width,real_y);       //设置末端状态
    context.lineWidth = 1;          //设置线宽状态
    context.strokeStyle = "#FF0" ;  //设置线的颜色状态
    context.stroke();
    context.closePath();
}

 

通过增加红色的两行代码就可以解决了。