javascript - 将 Canvas 的属性宽度设置为百分比值

Question

我正在开发一个网络应用程序，用户可以使用手机和平板电脑在 Canvas 上绘图。我的问题是，如果我在 CSS 中将 Canvas 的大小指定为百分比值，则 TouchDraw 脚本 ( http://www.codeproject.com/Articles/355230/HTML-5-Canvas-A-Simple-Paint-Program-Touch-and-Mou ) 将无法正常工作。这很悲伤，因为否则它是完美的。

所以我想我可以直接在脚本中指定 Canvas 的宽度和高度，如下所示:

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

当然，我必须处理不同的屏幕分辨率，因此百分比值是最好的。有没有办法在我的代码中使用百分比值？ 原因是这样的

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

不工作。 提前致谢!

Answer 1

好的，您可以通过附加到 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，我们需要从窗口的宽度和高度中减去，否则 Canvas 将超出页面。另请确保在页面加载时运行它，以便将尺寸调整为正确的尺寸。