如何使用KineticJS以全屏模式获取画布 [英] How to get canvas in fullscreen-mode with KineticJS

问题描述

我正在使用KineticJS库处理我的canvas元素.

I'm using KineticJS-Library to work with my canvas-Element.

我需要一个尺寸为1920x1080px的大画布元素，我的网站上没有其他显示.

I need one big canvas-Element with a size of 1920x1080px, nothing else is displayed on my site.

如果浏览器的分辨率不够高，我想按比例缩小整个canvas-Element: 长宽比必须始终保持在16:9，并且元素的大小应尽可能大(如果浏览器的宽高比不同，则为黑色边框).

If the browser's resolution is not high enough, I want to scale down the whole canvas-Element: The aspect ratio always has to stay at 16:9, and the size of the element should be as big as possible (black borders, if the browser's ratio is different).

但是，坐标空间必须保持为1920x1080-我不想使用坐标进行计算.

However, the coordinate-space has to stay at 1920x1080 - I don't want to calculate with coordinates.

有没有办法实现这一目标?

Is there a way I can achieve this?

推荐答案

我发现了另一个更易于实现的方法-画布元素内置了全屏功能，可以将整个画布设置为全屏模式，并在需要时显示黑色边框.

I found another Method which is much easier to implement - there's a built-in Fullscreen-Function for canvas-Elements, that sets the whole canvas in Fullscreen-Mode, and that shows black borders if needed.

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

我将此功能调用添加到了Ajax-Element的ondblclick -Event中:每次用户双击该元素时，它将启用或禁用全屏模式".

I added this function-call to the ondblclick-Event of the Ajax-Element: Each time the user double clicks the element, it enables or disables Fullscreen-Mode.

请注意，您不能在javascript代码中调用此函数:如果事件是由用户触发的，则浏览器仅允许全屏显示.

Note that you can't call this function in your javascript-Code: The Browsers only allow fullscreen, if the Event was triggered by the User.

它可以在Firefox和Chrome中运行，但不能在IE中运行.我还没有测试其他浏览器.

It works in Firefox and Chrome, but it doesn't work in IE. I haven't tested other browsers.

我目前将这种方法和第一个答案结合在一起，并且效果很好.

I currently have a combination of this method and my first answer, and it works just perfect.

这篇关于如何使用KineticJS以全屏模式获取画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！