如何在javascript中确定HTML5画布的大小和位置

Question

我正在使用JavaScript动态创建画布并将其显示在网页上，但是画布的大小和画布的位置均根据查看网页的设备的大小而有所不同，无论该设备是移动设备还是台式机。 我会在CSS中执行此操作，但是据我所知，CSS无法完全用于html5画布。 我会用这个：

#myCanvas{
  height: 50%;
  width: 50%;
  position: relative;
  top: 10%;
  left: 10%;
}

但是，画布的高度和宽度值仅采用像素值，我唯一能想到的解决方案是获取父元素的大小，然后获取其中的一部分来描述我希望画布的大小。 但是，如果那不起作用，我不知道。 就定位而言，我不知道我应该做什么。 就像我说的那样，我是动态创建画布的，因此代码如下所示：

var c = document.createElement("canvas");
c.height = (whatever value);
c.width = (whatever value);
c.style.position = "relative";
c.style.top = (whatever value);
c.style.left = (whatever value);
var ctx = c.getContext('2d');
parentElement.appendChild('c');

如果有人可以给我解决我的问题的方法，那将非常有帮助，谢谢=）

Answer 1

将画布封闭在容器div中，将该div的尺寸设置为成比例而不是固定。 然后，使用JQuery的“调整大小”功能将画布的尺寸设置为容器div的宽度和高度。

$(window).resize(function() {
   $('#canvas').attr('width', $('#parent').width());
   $('#canvas').attr('height', $('#parent').height());
});

阅读本文以了解更多信息： http : //ameijer.nl/2011/08/resizable-html5-canvas/