有人知道為什么這個畫布不起作用嗎？

Question

需要用畫布制作一個網站，但由於某種原因什么也沒顯示，畫布應該是白色的。.有人知道為什么嗎？ 還有其他div“推”畫布div來放置。

附帶說明一下，按下按鈕時可以更改畫布的尺寸嗎？ 例如：畫布是100x100px。 屏幕上有一個按鈕。 按下時，畫布大小會改變。

HTML：

<section id="Body"> 

    <div id="OtherDiv"></div>

    <canvas id="Canvas">
        Update your browser!
    </canvas>

    <div id="anotherDiv"></div>

</section>

CSS：

#Canvas{
float: left;
    margin-left: 15px;}
}

JavaScript：

function first(){
    var c=document.getElementById("Canvas");
    var canvas = c.getContext("2d");
    ctx.fillRect(0,0,150,75);
}
window.addeventlistener("load", first, false);

Answer 1

首先，沒有addeventlistener 。 大小寫很重要，它是addEventListener 。

其次，您沒有變量ctx 。

function first(){
    var canvas = document.getElementById("Canvas");  // changed c to canvas
    var ctx = canvas .getContext("2d");  // changed canvas to ctx and c to canvas
    ctx.fillRect(0,0,150,75);
}
window.addEventListener("load", first, false);  //properly camel cased it