Question

这是我的代码：我认为<html> <body>和<head>部分与我的问题无关。 <div id="title"> <h1 class="main">Options</h1> </div> <div id="field"> <p> <div id="rad"> <input type="radio" name="bookmarks" value="ab" checked="checked"> All bookmarks<br> <input type="radio" name="bookmarks" value="ao"> One folder<br> </div> <input id="input" type="text" value="Bookmark folder name"> <br> <button onClick="setname(null);" id="sub">Submit</button> </p> </div> <canvas id="myCanvas" width="400" height="500"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#000000"; ctx.fillRect(9,9,9,9); </script>只包含指向CSS文件的链接。我试图将画布放入我的页面但由于某种原因没有显示出来。有人可以查看我的代码，看看是否有什么东西让它无效吗？

{{1}}

截图： imgur

Answer 1

您的脚本代码在画布完全加载之前正在执行。

使用window.onload等待画布加载：

<script>
    window.onload=(function(){
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#000000";
        ctx.fillRect(9,9,9,9);
    });
</script>

我试图在我的页面上制作画布，但它不起作用

1 个答案: