JCanvas：具有超大可拖動圖像的全屏畫布

Question

使用JCanvas，我想做兩件事：

1. 根據屏幕的寬度和高度動態定義畫布的大小。

2. 在畫布上繪制比屏幕大的圖像，使其可拖動，並在圖像的邊緣停止拖動。

我有以下代碼：

function init() {
    $canvas = $('#canvas');
    $canvas.width = window.innerWidth;
    $canvas.height = window.innerHeight;

    $canvas.drawImage({
        x: 0,
        y: 0,
        source: "../images/testimage.jpg",
        draggable: true,
        layer: true,
    }).drawLayers();
}

不幸的是，瀏覽器在左上角僅顯示了圖像中心的一小部分（w：300像素； h：150像素）。 據我所知，這里沒有涉及CSS。

我可以在300像素x 150像素的小視口中拖動圖像。 但是，我希望圖像的可見部分散布在整個屏幕上並拖動以停止屏幕的邊緣：永遠不會出現空白。

我究竟做錯了什么？

Answer 1

嘗試

var canvas = document.getElementById('canvas');
canvas.width = innerWidth;
canvas.height = innerHeight;

由於我永遠無法鍛煉什么Jquery，因此遠遠看不到您的代碼。 如果可行，那么您知道jQuery正在設置樣式的寬度和高度。 對於畫布，width和height設置像素分辨率，而canvas.style.width height設置顯示尺寸。

默認的畫布分辨率為canvas.width = 300和canvas.height = 150