2

我正在开发一个 WebApp，用户可以使用他们的手机和平板电脑在画布上绘图。我的问题是，如果我在 CSS 中将画布的大小指定为百分比值，则 TouchDraw-Script（http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program -Touch-and-Mou ) 不再正常工作。这是可悲的，因为否则它是完美的。

所以我想我直接在脚本中指定画布的宽度和高度，如下所示：

sigCanvas.setAttribute('width', '320');
sigCanvas.setAttribute('height', '480');

当然我必须处理不同的屏幕分辨率，所以百分比值是最好的。有没有办法在我的代码中使用百分比值？导致这个

sigCanvas.setAttribute('width', '90%');

不管用。提前致谢！

4

1 回答 1

3

好的，所以你可以通过附加到窗口调整大小事件来做你想做的事情，如下所示：

$(window).resize(callbackFunc);

这是我为使其正常工作所做的更改。

参见 jsFiddle

$(document).ready(function () {
    initialize();

    updateSize();
});

$(window).resize(updateSize);

function updateSize() {
    var sigCanvas = document.getElementById("canvasSignature");
    var xOffset = 100;
    var yOffset = 100; // header height
    sigCanvas.setAttribute('width', window.innerWidth - xOffset);
    sigCanvas.setAttribute('height', window.innerHeight - yOffset);
}

并且可以根据您的需要进行定制xOffset，yOffset我们需要从窗口的宽度和高度中减去，否则画布将离开页面。还要确保在页面加载时运行它，以便将大小调整为正确的大小。

于 2013-03-05T10:00:25.420 回答