Fatal编程技术网
  • javascript/
  • Javascript 调整浏览器窗口的大小时，如何使用户可以调整大小的画布窗口也可以向下或向上缩放

Javascript 调整浏览器窗口的大小时，如何使用户可以调整大小的画布窗口也可以向下或向上缩放

javascript html html5-canvas

Javascript 调整浏览器窗口的大小时，如何使用户可以调整大小的画布窗口也可以向下或向上缩放,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,因此，目前我有一个画布，可以由用户调整大小。现在我想知道，在调整画布的大小时，是否可以使其随浏览器窗口一起缩小或增大，并且仍然允许用户调整画布的大小，而无需将画布推到浏览器窗口之外。我有一些代码可以借助它来完成这项工作，但有两件事会发生：1.画布将停止调整到某一点。2.在较小的浏览器窗口中调整画布的大小时，画布有时会超出浏览器窗口的范围，要使画布恢复浏览器的比例，唯一的方法是稍微调整浏览器窗口的大小。我对Javascript还是相当陌生的，所以我对一些事情是如何工作的，或者我正在尝试做的事情是否

因此，目前我有一个画布，可以由用户调整大小。现在我想知道，在调整画布的大小时，是否可以使其随浏览器窗口一起缩小或增大，并且仍然允许用户调整画布的大小，而无需将画布推到浏览器窗口之外。我有一些代码可以借助它来完成这项工作，但有两件事会发生：1.画布将停止调整到某一点。2.在较小的浏览器窗口中调整画布的大小时，画布有时会超出浏览器窗口的范围，要使画布恢复浏览器的比例，唯一的方法是稍微调整浏览器窗口的大小。我对Javascript还是相当陌生的，所以我对一些事情是如何工作的，或者我正在尝试做的事情是否可能有点不熟悉。提前谢谢

<!doctype html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="hxw">
                <div class="height">
                    <h3>Height</h3>
                        <select name="Height" id='height'>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="300">300</option>
                            <option value="400">400</option>
                            <option value="500">500</option>
                            <option value="600">600</option>
                        </select>
                </div>
                <div class=width>
                    <h3>Width</h3>
                        <select name="Width" id='width'>
                            <option value="100">8.0</option>
                            <option value="200">8.5'</option>
                            <option value="300">9.0'</option>
                            <option value="400">9.5'</option>
                            <option value="960">10.0'</option>
                            <option value="1008">10.5'</option>
                        </select>
                </div>
            </div>

    <div class = "container">
        <canvas id="canvas" style=" border: 1px solid #000;">
            Your browser does not support canvas, please upgrade your browser.
        </canvas>
    </div>

<script>
document.getElementById("canvas").style.marginLeft = "auto";
document.getElementById("canvas").style.marginRight = "auto";
canvas.style.display= 'block';
canvas.width = 100;
canvas.height = 50;
drawScreen();

formElement = document.getElementById("height");
formElement.addEventListener('change', heightChanged, true);

formElement = document.getElementById("width");
formElement.addEventListener('change', widthChanged, false);

function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
  drawScreen();
}

function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
  drawScreen();
}

function drawScreen() {
}


window.addEventListener(
'load',
function () {
var canvas = document.getElementsByTagName('canvas')[0];

fullscreenify(canvas);
},
false
);

function fullscreenify(canvas) {
var style = canvas.getAttribute('style') || '';
window.addEventListener('resize', function () {resize(canvas);}, false);

resize(canvas);


function resize(canvas) {
var scale = {x: 1, y: 1};
scale.x = (window.innerWidth - 40) / canvas.width;
scale.y = (window.innerHeight - 40) / canvas.height;
if (scale.x < 1 || scale.y < 1) {
scale = '1, 1';
} else if (scale.x < scale.y) {
scale = scale.x + ', ' + scale.x;
} else {
scale = scale.y + ', ' + scale.y;
}
canvas.setAttribute('style', style + ' ' + '-ms-transform-origin: center top; -webkit-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1); -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');');
}
} 




</script>
</body>
</html>


高度
100
200
300
400
500
600
宽度
8
8.5'
9.0'
9.5'
10.0'
10.5'
您的浏览器不支持画布，请升级您的浏览器。
document.getElementById（“canvas”）.style.marginLeft=“auto”；
document.getElementById（“画布”）.style.marginRight=“自动”；
canvas.style.display='block'；
画布宽度=100；
高度=50；
纱窗（）；
formElement=document.getElementById（“高度”）；
formElement.addEventListener（'change'，heightChanged，true）；
formElement=document.getElementById（“宽度”）；
formElement.addEventListener（'change'，widthChanged，false）；
函数宽度更改（e）{
var目标=e.target；
canvas.width=target.value；
纱窗（）；
}
功能高度已更改（e）{
var目标=e.target；
canvas.height=target.value；
纱窗（）；
}
函数drawScreen（）{
}
window.addEventListener(
“加载”，
函数（）{
var canvas=document.getElementsByTagName（'canvas'）[0]；
全屏化（画布）；
},
假的
);
功能fullscreenify（画布）{
var style=canvas.getAttribute（'style'）| |“”；
addEventListener（'resize'，函数（）{resize（canvas）；}，false）；
调整大小（画布）；
函数调整大小（画布）{
变量比例={x:1，y:1}；
scale.x=（window.innerWidth-40）/canvas.width；
scale.y=（window.innerHeight-40）/canvas.height；
if（比例x<1 | |比例y<1）{
比例='1,1'；
}else if（比例x<比例y）{
比例=比例.x+'，'+比例.x；
}否则{
scale=scale.y+'，'+scale.y；
}
canvas.setAttribute（'style'，style+'+''''''-ms变换原点：中上；-webkit变换原点：中上；-moz变换原点：中上；-o-transform-origin:center-top；变换原点：中上；-ms变换：scale（'+scale+'）；-webkit变换：scale3d（'+scale+'，1）；-moz变换：scale（'+scale+'））-o变换：缩放（'+scale+'）；变换：缩放（'+scale+'）；'）；
}
}
我将画布位置更改为“固定”，并使用resize（）函数，因为我的显示器是1920*1080，但浏览器中的显示器是1920*947。那可能有用

<div class = "container">
<canvas id="canvas" style=" border: 1px solid #000;position: fixed ;top: 10;left: 10;z-index:-1">
</canvas>
</div>

<script>
function widthChanged(e) {
  var target = e.target;
  canvas.width = target.value;
//add the resize function every browser size change
  fullscreenify(canvas);
}

function heightChanged(e) {
  var target = e.target;
  canvas.height = target.value;
//add the resize function every browser size change
  fullscreenify(canvas);
}

function resize(canvas) {
var scale = {x: 1, y: 1};
scale.x = (window.innerWidth ) / canvas.width;
scale.y = (window.innerHeight - 133) / canvas.height;
//I delete the data<1 Because your size is too big so I change that
if (scale.x < scale.y) {
scale = scale.x + ', ' + scale.x;
} else {
scale = scale.y + ', ' + scale.y;
}

canvas.setAttribute('style', style + ' ' + '-ms-transform-origin: center top; -webkit-transform-origin: center top; -moz-transform-origin: center top; -o-transform-origin: center top; transform-origin: center top; -ms-transform: scale(' + scale + '); -webkit-transform: scale3d(' + scale + ', 1); -moz-transform: scale(' + scale + '); -o-transform: scale(' + scale + '); transform: scale(' + scale + ');');

}
</script>


函数宽度更改（e）{
var目标=e.target；
canvas.width=target.value；
//每次浏览器大小更改时添加调整大小功能
全屏化（画布）；
}
功能高度已更改（e）{
var目标=e.target；
canvas.height=target.value；
//每次浏览器大小更改时添加调整大小功能
全屏化（画布）；
}
函数调整大小（画布）{
变量比例={x:1，y:1}；
scale.x=（window.innerWidth）/canvas.width；
scale.y=（window.innerHeight-133）/canvas.height；

//我删除了数据。这个方法效果不太好。不过谢谢。