在 HTML5 画布中绘制一系列矩形以完全填满画布答案

【问题标题】：Drawing a series of rectangles in HTML5 canvas to completely fill the canvas在 HTML5 画布中绘制一系列矩形以完全填满画布
【发布时间】：2021-07-20 15:44:05
【问题描述】：

我是 HTML 和 javascript 的新手，我试图用一系列矩形填充 HTML5 画布，每个矩形的高度都在增加，并且每个矩形都与前一个相邻。我想让我的代码在各种屏幕尺寸上运行，因此我从 javascript 中动态找到画布的宽度和高度。我希望用户将来输入条形“n”的数量。这是我尝试过的。

  //fucntion to draw the rectangles
 function draw(ctx,x,y,b,l){
    ctx.beginPath();
    ctx.rect(x,y,b,l);
    ctx.fill();
}

const c = document.querySelector("#my-canvas");
const ctx = c.getContext("2d");

//getting the height and widdth of the canvas
const cWidth = c.getBoundingClientRect().width;
const cHeight = c.getBoundingClientRect().height;

//number of bars/rectangles to be drawn
let n=10;

//calculating the width of each rectangle
let width = cWidth/n;
for(i=0;i<n;i++){
    draw(ctx,i*width,0,width,5*(i+1));
}

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 
            #my-canvas{
                position:relative;
                background: coral;
                height:70vh;
                width:70vw;
                top:15vh;
                left:15vw;
    
            }
        </style> 
    </head> 
      
    <body> 
        <canvas id="my-canvas"></canvas>
        <script src="tempCodeRunnerFile.js"></script>
    </body> 
</html>

这根本没有给出所有的条，有时它给了我 3 个其他时间 5 或 8，它随着浏览器和平台的变化而变化（JS-fiddle 在 chrome 上给我 5，在 firefox 上给我 7.5 这是代码@ 987654321@)，在我的电脑上它给出 2-3。

我有两个问题：

这里有什么问题，如何解决？
有没有更好的方法在 vanilla javascript 中执行此操作，因为我不知道任何其他库/框架

PS：对不起，如果这是一个重复的问题，我用我有限的英语找不到任何问题。

【问题讨论】：

标签： javascript html css html5-canvas

【解决方案1】：

使用c.getContext("2d") 获得的CanvasRenderingContext2D 对象使用画布的width 和height 属性作为其绘图表面尺寸。它们没有在您的代码中定义。

您可以在绘制任何内容之前添加以下内容：

c.width = c.offsetWidth;
c.height = c.offsetHeight;

然后问题就解决了。

我在这里稍微简化了你的 js 代码

window.addEventListener('load', _e => {
    //function to draw the rectangles
    function draw(ctx, x, y, b, l) {
        ctx.fillRect(x, y, b, l);
    }

    const c = document.querySelector("#my-canvas");
    c.width = c.offsetWidth;
    c.height = c.offsetHeight;

    //number of bars/rectangles to be drawn
    const n = 10;

    //calculating the width of each rectangle
    const width = c.width / n;
    console.log(`${n} rects on w=${c.width} => ${width}`)
    const ctx = c.getContext("2d");
    for (let i = 0; i < n; i++) {
        draw(ctx, i * width, 0, width, 5 * (i + 1));
    }
});

#my-canvas{
    position: relative;
    background: coral;
    height: 70vh;
    width: 70vw;
    top: 15vh;
    left: 15vw;
}

<!DOCTYPE html>
<html>
    <head></head>

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

</html>

画布的默认尺寸 (w*h) 为 300x150。这也是其渲染上下文的像素大小，无论使用 CSS 设置什么。如果不同，则渲染将被缩放以适应元素的大小。

在此示例中，我使用 Javascript 将 <canvas> 的 width 和 height 属性与屏幕上 DOM 元素的实际大小对齐。我是在 window.load 的处理程序中完成的，以确保在执行脚本之前渲染 CSS

【讨论】：

感谢您的快速回复，这非常有效，但我无法完全理解它，请参考一些文档了解更多信息。
@ShamboBasu TBH 我没有在文档中找到这个。我刚刚预感阅读 MDN 的 CanvasRenderingContext2D，对其进行了测试，它确实有效。我会尝试在官方参考中找到它...