在Chrome和Firefox中可以使用Canvas元素+ Javascript，而不能在Internet Explorer中使用

Question

我正在使用Leaflet FullCanvas插件的修改版本在地图上绘制线条。 这些行在Firefox和Chrome上可以完美地找到，但是在Internet Explorer（版本11，我使用的是Windows 8.1）上，这些行在移动/缩放地图时不会被重置。 我做了一个小提琴来说明这个问题：

http://jsfiddle.net/tee99z65/

在Chrome或Firefox上，然后在Internet Explorer（11）上，尝试拖动和缩放。 此代码中发生了什么？ 每次需要重画线时调用的方法是drawCanvas（） ：

drawCanvas: function () {
        var canvas = this.getCanvas();
        var ctx = canvas.getContext('2d');
        var me = this;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var bounds = this._myMap.getBounds();
        if (!this.options.filterPointsInBounds) bounds = new L.LatLngBounds([-90, -180], [90, 180]);
        var points = this._myQuad.retrieveInBounds(this.boundsToQuery(bounds));
        points.forEach(function (point) {
            var d = point.data;
            if (d.draw && !d.draw(d)) return;    // allows dynamic filtering of curves
            var spoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.slat, d.slon));
            if (d.tlat && d.tlon) {
                var tpoint = me._myMap.latLngToContainerPoint(new L.LatLng(d.tlat, d.tlon));
                me.drawCurve(point, spoint, tpoint, d.style ? d.style(d) : null);
            }
        });
    },

有人知道这里发生了什么吗？ 一个修复程序会很不错，但是如果有人能指出为什么会这样，那么我已经很高兴了，因此我可以自己尝试修复。

Answer 1

为什么？

因为鼠标滚轮事件尚未标准化。 （致浏览器制造商的注意： 认真！??? ，为什么还没有对mousewheel事件进行标准化。滚动鼠标已经存在了很多年！-rant /结束）。

固定：

你将不得不监听mousewheel上的IE事件，而不是DOMMouseScroll大多数其他浏览器监听事件。 我不使用leavlet，但这似乎是您需要添加修复程序的地方。

Answer 2

问题解决了：

http://jsfiddle.net/tee99z65/3/

绘制曲线的函数drawCurve（）已从以下编辑：

ctx.moveTo(startPoint.x, startPoint.y);
ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
ctx.stroke();

至：

 ctx.beginPath();
 ctx.moveTo(startPoint.x, startPoint.y);
 ctx.quadraticCurveTo(px, py, endPoint.x, endPoint.y);
 ctx.stroke();
 ctx.closePath();

经验教训：永远不要忘记beginPath（）和closePath（）。