javascript - 在 Javascript 中设置 Canvas 大小

Question

我正在尝试使用 Javascript 设置 HTML5 canvas 元素的宽度和高度。高度需要基于父 div 容器的高度，并且是整个页面的宽度。正在设置高度，但未设置宽度。谁能解释我哪里出错了以及如何解决？

HTML

<div id="main">
    <div id="navigation">
        <div id="portholeContainer">
            <div class="porthole"></div>
        </div>
        <ul>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact Me</li>
        </ul>
    </div>
    <div id="first" class="container">
        <canvas id="background"></canvas>
    </div>
    <div id="second" class="container"></div>
</div>

CSS

.container{
    display: block;
    float: left;
    width: 100%;
    margin-left: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
}

JS

window.addEventListener("load", function(){
    var container = document.getElementsByClassName("container");
    var first = document.getElementById("first");
    var canvas = document.getElementById("background");
    var ctx = canvas.getContext("2d");

    for(var i = 0; i < container.length; i++){
        container[i].style.height = (this.innerHeight / 1.24) +"px";
    }

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, this.innerWidth, first.style.height);
})

Answer 1

您需要设置canvas 对象的宽度和高度属性。目前，您只是在 Canvas 内绘制一个矩形，而不更改其尺寸，它保持默认值 300x150。

你应该使用:

canvas = document.getElementById("background");
canvas.width = 500; //or other value
canvas.height = 500; //or other value

window.addEventListener("load", function(){
    var container = document.getElementsByClassName("container");
    var first = document.getElementById("first");
    var canvas = document.getElementById("background");
    var ctx = canvas.getContext("2d");

    for(var i = 0; i < container.length; i++){
        container[i].style.height = (this.innerHeight / 1.24) +"px";
    }
  
  
    canvas.width = window.innerWidth;
    canvas.height = parseInt( first.style.height );

    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, this.innerWidth,first.style.height );
})

.container{
    display: block;
    float: left;
    width: 100%;
    margin-left: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
}

#first
{
  background-color: #ddd;
}

#first canvas
{
  outline: thick solid red;
}

<div id="main">
    <div id="navigation">
        <div id="portholeContainer">
            <div class="porthole"></div>
        </div>
        <ul>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact Me</li>
        </ul>
    </div>
    <div id="first" class="container">
        <canvas id="background"></canvas>
    </div>
    <div id="second" class="container"></div>
</div>