我希望我的 canvas-Element 始终具有相同的大小 - 与客户端的屏幕分辨率无关。
如果用户使用浏览器进行缩放，画布元素应该始终具有相同的大小。
此外，纵横比应该始终相同 - 我想要一个 1920-1080 点的坐标空间。 （如果浏览器的比例不同，canvas-element 的一侧可以有边框）。
我设法用 html + css 实现了这一点：
但是当我实现 fabric.js 时，它改变了画布的大小。而且我无法将其设置为响应式设计。
如何使用 fabric.js 实现这一点？
【问题讨论】：
标签： responsive-design fabricjs
2.4.2-b版本的解决方案，官方Api方法：http://fabricjs.com/docs/fabric.js.html#line7130
它适用于我的代码，将宽度和高度设置为 100%：
fabricCanvas.setDimensions({
width: '100%',
height: '100%'
},{
cssOnly: true
});
【讨论】：
经过一番试验，终于找到了一个只需要修改css-properties的解决方案。
答案很简单，虽然很长。
这是我的 html 正文：
<body onload='init()'>
<div id="canvasWrapper">
<canvas id="canvas" width="100px" height="100px"></canvas>
</div>
</body>
这是我的 CSS：
*{
padding: 0;
margin: 0;
border: 0;
}
body{
overflow: hidden;
}
#canvasWrapper {
background-color: red;
display: inline-block;
}
重要的部分是我的 canvas-wrapper 的“inline-block”，以及 body-element 的“overflow: hidden”。画布下方似乎有一些像素，这会使两个滚动条都出现。
经过一番试验，得到如下js-code：
function init(){
resizeCanvas(); //resize the canvas-Element
window.onresize = function() { resizeCanvas(); }
}
每当屏幕尺寸发生变化时，我的“resize”函数就会被调用。
整个技巧都在这个 resize-Function 中完成：
function resizeCanvas() {
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
var cv = document.getElementsByTagName("canvas")[0];
//var cc = document.getElementsByClassName("canvas-container")[0]; //In case of non-Static Canvas will be used
var cc = document.getElementById("canvasWrapper");
var cx,cy; //The size of the canvas-Element
var cleft=0; //Offset to the left border (to center the canvas-element, if there are borders on the left&right)
if(x/y > sizeX/sizeY){ //x-diff > y-diff ==> black borders left&right
cx = (y*sizeX/sizeY);
cy = y;
cleft = (x-cx)/2;
}else{ //y-diff > x-diff ==> black borders top&bottom
cx = x;
cy = (x*sizeY/sizeX);
}
cc.setAttribute("style", "width:"+x+"px;height:"+y+"px;"); //canvas-content = fullscreen
cv.setAttribute("style", "width:"+cx+"px;height:"+cy+"px;position: relative; left:"+cleft+"px"); //canvas: 16:9, as big as possible, horizintally centered
}
此函数计算窗口宽度，以及在不改变比例的情况下可能的最大画布尺寸。
之后，我将 wrapper-div 设置为 fullscreen-size，并将 canvas-Element 的大小设置为之前计算的大小。
无需更改画布元素的内容，也无需重绘任何内容，一切正常。
它是跨浏览器兼容的（在 Firefox 25、Chrome 31 和 Internet Explorer 11 上测试）
【讨论】：
var sizeX = 1920, sizeY = 1080;
sizeX/sizeY 是我想要达到的比率。就我而言，它是16:9。