Question

我是html5的新手，现在我遇到了画布的问题。我尝试使用画布2d画一个矩形。在开发人员工具中，它显示画布为空。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Testing</title>
<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);

</script>

<style type="text/css">
    body{
        background:#ccc;
        color:777;
        font-size:14px;
        font-family: verdana;
    }
    #myCanvas{
        margin:50px auto;
        background:#eee;
    }
</style>
</head>
<body>
    <canvas id="myCanvas" height="180" width="360"></canvas>
</body>
</html>

任何帮助将不胜感激。提前谢谢......

Answer 1

您的JS在文档初始化之前正在运行。

Answer 2

您需要将JavaScript放在window.onload事件调用的函数中。

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
}

html 5画布不起作用

2 个答案: