Question

我正在使用KineticJS-Library来处理我的canvas-Element。

我需要一个大画布 - 尺寸为1920x1080像素的画布，我的网站上没有显示任何其他内容。

如果浏览器的分辨率不够高，我想缩小整个画布 - 元素：宽高比始终必须保持在16：9，元素的大小应尽可能大（黑色边框，如果浏览器的比例不同）。

但是，坐标空间必须保持在1920x1080 - 我不想用坐标计算。

有没有办法实现这个目标？

Answer 1

在尝试使用scale-Property之后，我终于找到了一个更简单的解决方案，我只需要修改css-properties。

答案很简单，虽然时间很长。

这是我的html-body：

<body onload='init()'>
    <div id="canvasWrapper"></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-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 ratio = x/y;            //browser-ratio
    var should = 1920/1080;     //needed ratio

    var cv = document.getElementsByTagName("canvas")[0];
    var cc = document.getElementsByClassName("kineticjs-content")[0];

    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(ratio > should){         //x-diff > y-diff   ==> black borders left&right
        cx = (y*1920/1080);
        cy = y;
        cleft = (x-cx)/2;
    }else{                      //y-diff > x-diff   ==> black borders top&bottom
        cx = x;
        cy = (x*1080/1920);
        cv.setAttribute("style", "width:"+x+"px;height:"+(x*1080/1920)+"px;");
    }

    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
}

此函数计算窗口宽度，以及可以在不改变比率的情况下实现的最大画布大小。

之后，我将自动生成的“kineticjs-content”-div设置为全屏大小，并将canvas-Element的大小设置为先前计算的大小。

一切正常，无需更改画布内容和重绘任何内容。

它是跨浏览器兼容的（在Firefox 25，Chrome 31和Internet Explorer 11上测试）

Answer 2

我找到了另一个更容易实现的方法 - 有一个用于canvas-Elements的内置全屏功能，它将整个画布设置为全屏模式，并在需要时显示黑色边框。

http://www.sitepoint.com/html5-full-screen-api/

我将此函数调用添加到了ondblclick - Ajax-Element的事件：每次用户双击该元素时，它都会启用或禁用全屏模式。

请注意，您无法在javascript-Code中调用此函数：如果用户触发了事件，则浏览器仅允许全屏显示。

它适用于Firefox和Chrome，但它在IE中不起作用。我还没有测试过其他浏览器。

我目前有这种方法和我的第一个答案的组合，它的工作非常完美。

如何使用KineticJS在全屏模式下获得画布

2 个答案: