Question

所以目前我有一个可以由用户调整大小的画布。现在我想知道是否可以在调整大小时使用浏览器窗口缩小或缩小此画布，并且仍允许用户调整画布大小而不将画布推到浏览器窗口之外。我有一些代码可以在https://gist.github.com/zachstronaut/1184900的帮助下完成，但有两件事情会发生：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>

Answer 1

好吧，我将画布位置更改为固定，并将resize（）函数更改为133，因为我的显示器是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>

在调整浏览器窗口大小时，如何使用户可调整大小的画布窗口也缩小或缩小

1 个答案: