在 HTML5 canvas 中绘制一系列矩形以完全填充 canvas

Question

我是 HTML 和 javascript 的新手，正在尝试用一系列矩形填充 HTML5 canvas，每个矩形的高度都在增加，每个矩形都在下一个到以前。我想让我的代码在各种屏幕尺寸上运行因此我从 javascript 动态地找到 canvas 的宽度和高度。我希望将来用户输入柱数 '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 在 [=43= 上给我 5 ] 和 7.5 在 firefox 上是代码 https://jsfiddle.net/8b9a4de5/) 在我的电脑上它给出 2-3.

我有两个问题：

这里有什么问题，如何解决？
有没有更好的方法在原版中做到这一点 javascript 因为我不知道任何其他 libraries/frameworks

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

Answer 1

通过 c.getContext("2d") 获得的 CanvasRenderingContext2D 对象对其绘图表面尺寸使用 canvas' 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>

编辑：更多解释

我在这里指的是 MDN 文档 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_usage

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

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

在 HTML5 canvas 中绘制一系列矩形以完全填充 canvas

Drawing a series of rectangles in HTML5 canvas to completely fill the canvas

html

javascript

css

html5-canvas