动态调整画布大小；保持图像位置

Question

动态调整画布大小；保持图像位置

javascripthtmlcsshtml5-canvas

3

有没有一种方法可以创建一个动态画布，使它的尺寸与所在的<div>相同。

我尝试使用CSS中的height:100%，width:100%。这样我就有了一个始终和

一样大的画布，但是里面的内容会随着缩放而变形。

因此，我想知道一种调整画布大小但保持图像确切位置的方法，即使在移动设备上改变横竖屏也不受影响。

- breezertwo

1

是的，但要设置画布元素的宽度和高度属性，而不是 CSS 的宽度和高度。那些会拉伸画布元素，而宽度和高度属性则不会。 - George

2个回答

0

如果要调整画布大小，可以使用HTML5画布标签。下面的框架是需要可调整大小画布的应用程序所需的全部内容。它：

添加了一个带有唯一ID（在此示例中为“c”）的画布元素的HTML标记
声明了一个名为htmlCanvas的Javascript变量，并使用DOM的getElementById()方法引用该画布的ID
获取绘制图形的上下文（名为context的变量）
调用了一个名为initialize()的用户定义函数，在本例中获得对浏览器调整大小事件的访问权限
这将创建一个隐式循环，当浏览器窗口大小改变时，调用用户定义的resizeCanvas()方法

示例代码：

<html>
<body>
<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0px;
            border: 0;
            overflow: hidden; /*  Disable scrollbars */
            display: block;  /* No floating content on sides */
        }
    </style>
</head>
<body>
    <canvas id='c' style = 'position: absolute; left: 0px; top: 0px;' >
    </canvas>
    <script>
        (function() {
            var 
                // Obtain a reference to the canvas element
                // using its id.
                htmlCanvas = document.getElementById('c'),

                // Obtain a graphics context on the
                // canvas element for drawing.
                context = htmlCanvas.getContext('2d');

            // Start listening to resize events and
            // draw canvas.
            initialize();
            function initialize() {
                // Register an event listener to
                // call the resizeCanvas() function each time 
                // the window is resized.
                window.addEventListener('resize', resizeCanvas, false);

                // Draw canvas border for the first time.
                resizeCanvas();
            }

            // Display custom canvas.
            // In this case it's a blue, 5 pixel border that 
            // resizes along with the browser window.                   
            function redraw() {
                context.strokeStyle = 'blue';
                context.lineWidth = '5';
                context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
            }

            // Runs each time the DOM window resize event fires.
            // Resets the canvas dimensions to match window,
            // then draws the new borders accordingly.
            function resizeCanvas() {
                htmlCanvas.width = window.innerWidth;
                htmlCanvas.height = window.innerHeight;
                redraw();
            }

        })();
    </script>
</body>
</html>

- Suraj Libi

你需要使用div的clientWidth和clientHeight，而不仅仅是window.innerWidth/Height。 - George

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George · Accepted Answer

您想设置画布元素的宽度和高度“属性”，而不是仅拉伸默认为300x150宽度/高度的CSS宽度和高度。您可以使用JavaScript动态调整画布元素的大小。

以下是一个可行的示例。

//get the elements
const canvas = document.getElementById("canvas");
const myDiv = document.getElementById("my-div");

//set the width and height attributes to the div width and height
function resize(){
  canvas.width = myDiv.clientWidth;
  canvas.height = myDiv.clientHeight;
}
//on page resize, call resize()
window.addEventListener("resize", resize, false);

//call resize() initially to set the canvas size correctly
resize();

//you can call resize() when your div changes size, dynamically resizing the canvas to the div

div {
  width: 50vw;
  height: 50vh;
  background-color: lightblue;
}
canvas {
  background-color: rgba(255,0,0,0.5);
}

<div id="my-div">
  <canvas id="canvas"></canvas>
</div>