HTML5画布不工作_Html_Canvas - Fatal编程技术网

HTML5画布不工作

html canvas

HTML5画布不工作,html,canvas,Html,Canvas,我是html5的新手，现在我遇到了画布的问题。我尝试使用canvas 2d绘制一个矩形。在开发工具中，它显示画布为空 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Canvas Testing</title> <script type="text/javascript"> var c=document.getElementBy

我是html5的新手，现在我遇到了画布的问题。我尝试使用canvas 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>


帆布测试
var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
cxt.fillStyle=“#FF0000”；
cxtfillrect（0,0150,75）；
身体{
背景：#ccc；
颜色：777；
字体大小：14px；
字体系列：verdana；
}
#我的画布{
保证金：50px自动；
背景：#eee；
}

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

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

您需要将JavaScript放在由

窗口调用的函数中。onload

事件

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

您需要将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);
}

我试着将javascript放在页面底部，效果也一样。谢谢家伙…按你所说的那样放置在底部，使用Windows .OnLoad。在加载A重载时要考虑的是，它可以被其他脚本重载，并且可能会给其他脚本带来意外错误。当我使用画布时，我调用body标记中的onload函数：当整个主体（包括其元素（在本例中为画布）被加载和声明时，将调用该函数。未在函数中调用的javascript代码只能使用在脚本之前声明的元素，因此画布为空。我尝试将javascript放在页面底部，它的工作原理相同。谢谢家伙…按你所说的那样放置在底部，使用Windows .OnLoad。在加载A重载时要考虑的是，它可以被其他脚本重载，并且可能会给其他脚本带来意外错误。当我使用画布时，我调用body标记中的onload函数：当整个主体（包括其元素（在本例中为画布）被加载和声明时，将调用该函数。未在函数中调用的javascript代码只能使用在脚本之前声明的元素，因此画布为空。