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();
}

不幸的是，浏览器在左上角仅显示图像中心的一小部分（宽：300 像素；高：150 像素）。据我所知，这里不涉及 CSS。

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

我做错了什么？

Answer 1

试试

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

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

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