有人知道为什么这个画布不起作用吗？

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