javascript - Canvas 的setAttribute宽度作为百分比值

我正在开发一个WebApp，用户可以在其中使用手机和平板电脑在Canvas上绘图。我的问题是，如果我在CSS中将画布的大小指定为百分比值，则TouchDraw脚本（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%');

不管用。
提前致谢！

最佳答案

好的，这样您就可以通过将window resize event附加到您的计算机上来执行所需的操作：

$(window).resize(callbackFunc);

这是我为使其正常运行所做的更改。

See on 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，我们需要从窗口的宽度和高度中减去，否则画布将离开页面。另外，请确保在页面加载时运行它，以便将大小调整为正确的大小。