Question

我正在使用WebApp，用户可以使用手机和平板电脑在Canvas上绘图。我的问题是，如果我在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%');

无效。提前谢谢！

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的setAttribute宽度为百分比值

1 个答案: