在 Javascript 中設置畫布大小

Question

我正在嘗試使用 Javascript 設置 HTML5 畫布元素的寬度和高度。 高度需要基於父 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對象的寬度和高度屬性。 目前，您只在畫布內繪制一個矩形，而不更改其尺寸，默認值保持為 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>