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

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