JCanvas：全屏 canvas 超大可拖动图像

Question

使用 JCanvas，我想做两件事：

根据屏幕的宽高动态定义一个canvas的大小
将比屏幕大的图像绘制到 canvas 并使其可拖动，拖动在图像的边缘停止。

我有以下代码：

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 px；h：150 px）。据我所知，这里不涉及 CSS。

我可以在 300 像素 x 150 像素的小视口中拖动图像。但是，我希望图像的可见部分散布在整个屏幕上并拖动以停止屏幕的边缘：永远不会看到白色 space。

我做错了什么？

Answer 1

尝试

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

因为我永远无法锻炼 Jquery 因为看你的代码远非显而易见。如果可行，那么您就知道 jQuery 正在设置样式宽度和高度。对于 canvas，宽度和高度设置像素分辨率，canvas.style.width 高度设置显示大小。

默认 canvas 分辨率为 canvas.width = 300 和 canvas.height = 150

JCanvas：全屏 canvas 超大可拖动图像

JCanvas: full screen canvas with oversize draggable image

canvas

fullscreen

draggable

viewport

jcanvas