0

使用 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 px x 150 px 的小视口中拖动图像。但是，我希望图像的可见部分遍布整个屏幕并拖动以停止屏幕边缘：永远不会看到任何空白。

我究竟做错了什么？

4

1 回答 1

1

尝试

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

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

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

于 2016-11-30T00:14:03.297 回答