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 个不同的问题，控制台中没有错误。

我是一个初学者，所以我不知道是否有一些限制，如 CSS for JS 中的“webkit”。

如果您需要更多信息，请告诉我！谢谢！

Answer 1

我发现了 firefox 的问题，这只是一个更新问题。我的朋友用他们的 Firefox 版本对其进行了测试，一切正常，我更新了我的 Firefox（以为它是单独做的，但显然不是），它运行良好。如果这是否是同样的问题，我将尝试使用 safari

Answer 2

Firefox 不支持画布绘图，但有 Mozilla 特定的替代方案。见https://caniuse.com/#search=Canvas

关于您在 Safari 中重置缩放后的定位问题，请发布您的重置按钮功能。很有可能，您错过了位置/坐标跟踪的一些重新初始化。