IE浏览器清除canvas画布失效

Question

• 使用canvas先绘制图像
• 图像上定位几个div，用来触发事件
• 触发事件的时候，显示信息描述的框和连线
• 信息描述的框时div，不受影响
• 连线是由canvas绘制的，在清除的时候，在谷歌和火狐浏览器中都可以清除，但是在IE浏览器中无法清除

<div id="contain">
    <canvas id="myCanvas" width="1168" height="704" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
    </canvas>
</div>
<div class="block">
    <div class="msg">
        <span>站点信息：</span><span class="msg msg1">msgmsg</span><br>
        <span>上游信息：</span><span class="msg msg2">msgmsg</span><br>
        <span>距离上游：</span><span class="msg msg3">msgmsg</span><br>
        <span>下游信息：</span><span class="msg msg4">msgmsg</span><br>
        <span>距离下游：</span><span class="msg msg5">msgmsg</span>
    </div>
</div>

<div>
    <div class="position zd37"></div>
    <div class="position zd40"></div>
    <div class="position zd41"></div>
</div>

#bgimg {
    display: none;
    width: 1168px;
    height: 704px;
}

.position {
    position: absolute;
    /* background-color: red; */
    width: 45px;
    height: 45px;
    /* border-radius: 50%; */
    cursor: pointer;
}

.zd37 {
    left: 400px;
    top: 360px;
}

.zd40 {
    left: 555px;
    top: 375px;
}

.zd41 {
    left: 630px;
    top: 360px;
}

.block {
    width: 250px;
    height: 105px;
    border: 1px solid red;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    display: none;
}

//自执行函数，绘制图像
$(function () {
    var $my_canvas = $("#myCanvas");
    var my_canvas = $my_canvas[0];
    var context = my_canvas.getContext("2d");
    preImage("map.jpg", function () {
        context.drawImage(this, 0, 0, 1168, 704);
    });
});
//绘制图像函数
function preImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载  
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
        callback.call(img);
        return; // 直接返回，不用再处理onload事件  
    }
    img.onload = function () { //图片下载完毕时异步调用callback函数。  
        callback.call(img); //将回调函数的this替换为Image对象  
    };
}
//绘制连线函数
function drawline(that) {
    var $my_canvas = $("#myCanvas");
    var my_canvas = $my_canvas[0];
    var contain = document.getElementById("contain");
    var context = my_canvas.getContext("2d");
    //方法1，不兼容IE
    contain.removeChild(my_canvas);
    context.clearRect(0, 0, 1168, 704);
    contain.appendChild(my_canvas);
    //方法2，不兼容IE
    //my_canvas.height = my_canvas.height;
    preImage("map.jpg", function () {
        context.drawImage(this, 0, 0, 1168, 704);
    });
    //本站点
    var startx = that.offset().left + that.width() / 2 - 10;
    var starty = that.offset().top + that.height() - 10;
    //结束点
    var endx = that.offset().left + that.width() / 2 - 10
    var endy = that.offset().top + that.height() + 40

    //本线条
    context.moveTo(startx, starty); //设置起点状态
    context.lineTo(endx, endy); //设置末端状态
    context.lineWidth = 5; //设置线宽状态
    context.strokeStyle = "red" //设置线的颜色状态
    context.stroke(); //进行绘制

    //前一个站点
    var prev = that.prev();
    console.log(prev);
    if (prev.offset()) {
        var startxp = prev.offset().left + prev.width() / 2 - 10;
        var startyp = prev.offset().top + prev.height() - 10;
        //前面的线条
        context.moveTo(startxp, startyp); //设置起点状态
        context.lineTo(endx, endy); //设置末端状态
        context.lineWidth = 5; //设置线宽状态
        context.strokeStyle = "red" //设置线的颜色状态
        context.stroke(); //进行绘制
    }
    //后一个站点
    var next = that.next();
    if (next.offset()) {
        var startxn = next.offset().left + next.width() / 2 - 10;
        var startyn = next.offset().top + next.height() - 10;
        //后面的线条
        context.moveTo(startxn, startyn); //设置起点状态
        context.lineTo(endx, endy); //设置末端状态
        context.lineWidth = 5; //设置线宽状态
        context.strokeStyle = "red" //设置线的颜色状态
        context.stroke(); //进行绘制
    }
}
//绘制描述信息的盒子
function drawbox(that) {
    $(".block").show();
    var blockleft = that.offset().left + that.width() / 2 - $(".block").width() / 2;
    var blocktop = that.offset().top + that.height() + 50;
    $(".block").css({
        "left": blockleft + "px",
        "top": blocktop + "px"
    });
}
//分别点击三个div
$(".zd37").on('click', function () {
    var that = $(this);
    drawline(that);
    drawbox(that);
})
$(".zd40").on('click', function () {
    var that = $(this);
    drawline(that);
    drawbox(that);
})
$(".zd41").on('click', function () {
    var that = $(this);
    drawline(that);
    drawbox(that);
})

Answer 1

• 改了思路，将canvas的初始化放到全局，将触发事件写到一个函数中。
• 这样可以成功清除canvas画布内容，但是不知道这种方法和上一种方法区别在哪里。
• 上面的方法，还是请大佬指教，哪里不对。

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
preImage("map.jpg", function () {
    ctx.drawImage(this, 0, 0, 1168, 704);
});

$(".position").click(function () {
    var that = $(this);
    draw(that);
});
$(".clear").click(function () {
    cc();
    preImage("map.jpg", function () {
        ctx.drawImage(this, 0, 0, 1168, 704);
    });
});

function preImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图片的预下载  
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
        callback.call(img);
        return; // 直接返回，不用再处理onload事件  
    }
    img.onload = function () { //图片下载完毕时异步调用callback函数。  
        callback.call(img); //将回调函数的this替换为Image对象  
    };
}

function cc() {
    ctx.clearRect(0, 0, c.width, c.height);
}

function draw(that) {
    cc();
    preImage("map.jpg", function () {
        ctx.drawImage(this, 0, 0, 1168, 704);
    });

    //本站点
    var startx = that.offset().left + that.width() / 2 - 10;
    var starty = that.offset().top + that.height() - 10;
    //结束点
    var endx = that.offset().left + that.width() / 2 - 10
    var endy = that.offset().top + that.height() + 40
    //线条样式
    ctx.lineWidth = 5; //设置线宽状态
    ctx.strokeStyle = "red" //设置线的颜色状态

    //本线条
    ctx.beginPath();
    ctx.moveTo(startx, starty);
    ctx.lineTo(endx, endy);
    ctx.stroke(); //进行绘制

    //前一个站点
    var prev = that.prev();
    if (prev.offset()) {
        var startxp = prev.offset().left + prev.width() / 2 - 10;
        var startyp = prev.offset().top + prev.height() - 10;
        //前面的线条
        ctx.beginPath();
        ctx.moveTo(startxp, startyp); //设置起点状态
        ctx.lineTo(endx, endy); //设置末端状态
        ctx.stroke(); //进行绘制
    }
    //后一个站点
    var next = that.next();
    if (next.offset()) {
        var startxn = next.offset().left + next.width() / 2 - 10;
        var startyn = next.offset().top + next.height() - 10;
        //后面的线条
        ctx.beginPath();
        ctx.moveTo(startxn, startyn); //设置起点状态
        ctx.lineTo(endx, endy); //设置末端状态
        ctx.stroke(); //进行绘制
    }

    $(".block").show();
    var blockleft = that.offset().left + that.width() / 2 - $(".block").width() / 2;
    var blocktop = that.offset().top + that.height() + 50;
    $(".block").css({
        "left": blockleft + "px",
        "top": blocktop + "px"
    });

}