HTML Canvas调整大小问题

如何解决HTML Canvas调整大小问题

我正在尝试调整画布的大小以适合Bootstrap网格内其父div的大小，但是画布始终填充为2000px x 2000px。从console.log看来，我成功地调整了大小，因为它们返回了相同的尺寸。 “ Hello World” div刚刚在这里进行测试。

HTML

        <div class="row justify-content-center">
            <div class="col-10">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-8 text-center">
                                <div class="bg-gradient-danger w-100">Hello World</div>
                                <br>
                                <div id="canvasBox"
                                     style="padding: 5px; margin-bottom: 5px;border: 4px solid navy;">
                                    <canvas id="canvas" width="1" height="1"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

JavaScript

        let canvas = document.getElementById('canvas');
        let parent = document.getElementById('canvasBox');
        let imgUrl = document.getElementById('canvasIMG');
        let ctx = canvas.getContext('2d');

        let wdt = parent.clientWidth - parseInt(parent.style.paddingLeft) - parseInt(parent.style.paddingRight);
        let ht = parent.clientHeight - parseInt(parent.style.paddingTop) - parseInt(parent.style.paddingBottom);

        console.log(wdt,ht)
        canvas.setAttribute('width',wdt + "px");
        canvas.setAttribute('height',ht + "px");
        console.log(canvas.width,canvas.height)
        ctx.drawImage(imgUrl,0);
        ctx.fillRect(0,canvas.width,canvas.height);
        

下面是结果的屏幕快照，画布不断溢出。

解决方法

也许您的初始宽度和高度值也不正确。您可以在页面加载和调整大小以适合画布时刷新：

                  let canvas = document.getElementById('canvas');
        let parent = document.getElementById('canvasBox');
        let imgUrl = document.getElementById('canvasIMG');
        let ctx = canvas.getContext('2d');

        function refresh() {
          let wdt = parent.clientWidth - parseInt(parent.style.paddingLeft) - parseInt(parent.style.paddingRight);
        let ht = parent.clientHeight - parseInt(parent.style.paddingTop) - parseInt(parent.style.paddingBottom);

        canvas.setAttribute('width',wdt + "px");
        canvas.setAttribute('height',ht + "px");

          ctx.fillRect(0,canvas.width,canvas.height);
        };

window.addEventListener('load',refresh);
window.addEventListener('resize',refresh);

    <div class="row justify-content-center">
            <div class="col-10">
                <div class="card">
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-8 text-center">
                                <div class="bg-gradient-danger w-100">Hello World</div>
                                <br>
                                <div id="canvasBox"
                                     style="padding: 5px; margin-bottom: 5px;border: 4px solid navy;">
                                    <canvas id="canvas" width="1" height="1"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

,

一种使画布在蓝色框内部发光的方法是在画布上使用style="width: 100%"：

<canvas id="canvas" style="width: 100%;" height="200px"></canvas>

这不会根据用户的窗口大小设置高度，但是如果用户没有与您正在测试的窗口大小相同的窗口，则使用clientHeight可能会导致宽高比不佳。

此解决方案给出了结果：