Javascript（JS）應用程序可在Chrome上運行，但不能在mozilla firefox / safari上運行

Question

這是我的問題，我創建了一個Web應用程序，您需要在其中加載文件（圖像），然后在調整大小后將其顯示在畫布中，以免超出1500像素。 然后，我使用像這樣編程的畫布縮放（在我的鼠標位置縮放的另一個畫布）：

var x1, wdth1, psx1, wdth2, y1, heg1, psy1, heg2;
function drawZoom(x, y) {
    $('#zoom').css({
        'left': x - (parseInt($('#zoom').css('width')) / 2),
        'top': y - (parseInt($('#zoom').css('height')) / 2)
    });
    // console.log([x,y]);
    $('#zoom').show(function () {
        if (x < 25) {
            x1 = 0;
            wdth1 = (x + zoom_level / 2) * ratio;
            psx1 = (25 - x) * 2;
            wdth2 = 100 - psx1;
        } else if (x > width_canvas - zoom_level/ 2) {
            x1 = (x - zoom_level/ 2) * ratio;
            wdth1 = (width_canvas - x + zoom_level/ 2) * ratio;
            psx1 = 0;
            wdth2 = 100 - 2 * (x + zoom_level/ 2 - width_canvas);
        } else {
            x1 = (x - zoom_level/ 2) * ratio;
            wdth1 = zoom_level* ratio;
            psx1 = 0;
            wdth2 = 100;
        }
        if (y < 25) {
            y1 = 0;
            heg1 = (y + zoom_level/ 2) * ratio;
            psy1 = (25 - y) * 2;
            heg2 = 100 - psy1;
        } else if (y >= height_canvas - zoom_level/ 2) {
            y1 = (y - zoom_level/ 2) * ratio;
            heg1 = (height_canvas - y + zoom_level/ 2) * ratio - 1;
            psy1 = 0;
            heg2 = 100 - 2 * (y + zoom_level/ 2 - height_canvas);
        } else {
            y1 = (y - zoom_level/ 2) * ratio;
            heg1 = zoom_level* ratio;
            psy1 = 0;
            heg2 = 100;
        }
        // console.log(heg1);
        zoomctx.fillStyle = "black";
        zoomctx.fillRect(0, 0, 100, 100);
        zoomctx.drawImage(canvas, x1, y1, wdth1, heg1, psx1, psy1, wdth2, heg2);
    });
    zoomctx.beginPath();
    zoomctx.moveTo(0, 50);
    zoomctx.lineTo(100, 50);
    zoomctx.moveTo(50, 0);
    zoomctx.lineTo(50, 100);
    zoomctx.closePath();
    zoomctx.stroke();
}

然后我保存點擊的位置並使用它們來計算距離等...（另一個故事），所以我有一個重置按鈕，當您開始點擊並失敗所需的4次點擊之一時，您可以重新啟動，它刪除所有點並重新啟動功能。

問題：

-Chrome：效果極佳，沒有問題，縮放效果好，導航流暢，重啟效果完美等。

-Firefox：我在左上角有一個黑色圓圈（是變焦鏡頭，但全黑，無法正常工作），它沒有移動，我可以單擊並重新啟動，但看不到我單擊的位置以及之后的過程點擊不起作用。

-Safari：圖像顯示得很好，當我第一次加載圖像時縮放就可以了，我可以單擊4次，其余程序可以正常工作，但是如果我重新啟動，那么當我將鼠標放在某處時，縮放就像移位了一樣縮放無法顯示正確的位置。

所以我在chrome上沒有問題，在safari和mozilla firefox中有2個不同的問題，控制台中沒有錯誤。

我是一個初學者，所以我不知道這是否是JS CSS中“ webkit”的一些限制。

告訴我您是否需要更多信息！ 謝謝 ！

Answer 1

我發現Firefox發生了什么，這只是一個更新問題。 我的朋友使用他們的firefox版本對其進行了測試，一切正常，因為我更新了我的firefox（認為它是單獨執行的，但顯然不是這樣做的），並且運行良好。 如果這是同樣的問題，我將嘗試使用野生動物園

Answer 2

Firefox不支持Canvas繪圖，但是有Mozilla特定的替代方法。 參見https://caniuse.com/#search=Canvas

至於在重置放大野生動物園后您的定位問題，請發布您的重置按鈕功能。 可能是，您缺少對位置/坐標跟蹤的一些重新初始化。