setAttribute画布的宽度百分比

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

所以我想，我直接在脚本像这样指定画布的宽度和高度：

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

我当然要处理不同的屏幕分辨率，所以百分比值将是最好的。有没有办法在我的代码中使用百分比值？原因

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

不起作用。在此先感谢！

来源

2013-03-05 user2135133

好了，你可以通过连接到像这样做你想要什么：

$(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可以定制您的需求，我们需要从窗口的宽度和高度减去否则画布将熄灭的页面。另外请确保在页面加载时运行它，以便将大小调整为正确的大小。

来源

2013-03-05 10:00:25

这绝对好！它工作完美！非常感谢！ – user2135133 2013-03-05 10:20:35

setAttribute画布的宽度百分比

回答

相关问题