Javascript 未显示图形_Javascript_Html_Css_Raphael

Javascript 未显示图形

javascript html css

Javascript 未显示图形,javascript,html,css,raphael,Javascript,Html,Css,Raphael,我只是尝试使用Javascript库Raphael创建一些简单的矢量图形。应该有一个方形对象和一个曲线对象，但没有显示任何内容。有人能帮我吗。多谢各位 <html> <head> <script src="raphael.js"></script> <script src="jquery-1.7.2.js"></script> <script type="text/javascript"> //all you

我只是尝试使用Javascript库Raphael创建一些简单的矢量图形。应该有一个方形对象和一个曲线对象，但没有显示任何内容。有人能帮我吗。多谢各位

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript"> //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>


//所有javascript都在这里
var纸张=拉斐尔（“样本2”，200，100）；
var rectPath=纸张路径（“M10,10L10,90L90,90L90,10Z”）；
var curvePath=纸张路径（“M110,10s55,25 40,80Z”）；
attr（{fill:“green”}）；
curvePath.attr（{fill:“blue”}）；

将脚本移动到

标记之后

或者有些人更喜欢使用onload处理程序，为了简单起见使用jQuery

$(function(){
    // Your code that runs after the DOM is loaded
});

关键是您的代码正在访问DOM，它需要在构建DOM之后运行。从onload处理程序或在您使用的DIV之后调用它可以确保元素准备好与之交互。

您运行Javascript的时间太早了。您的浏览器将在读取时运行Javascript，如果DOM元素尚未加载，则不会执行任何操作

试试这个：

<html>
    <head>
        <script src="raphael.js"></script>
        <script src="jquery-1.7.2.js"></script>
    </head>

    <body>
        <div id="sample-2" style="width:500px; height:500px;"></div>
        <script type="text/javascript">
            //all your javascript goes here  
            var paper = Raphael("sample-2", 200, 100);
            var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
            var curvePath = paper.path("M110,10s55,25 40,80Z");

            rectPath.attr({
                fill: "green"
            });
            curvePath.attr({
                fill: "blue"
            });
        </script>
    </body>
</html>


//所有javascript都在这里
var纸张=拉斐尔（“样本2”，200，100）；
var rectPath=纸张路径（“M10,10L10,90L90,90L90,10Z”）；
var curvePath=纸张路径（“M110,10s55,25 40,80Z”）；
rectPath.attr({
填充：“绿色”
});
曲线路径({
填充：“蓝色”
});

祝你好运

@JuanMendes有点让人困惑，最终的问题是在DOM准备好之前调用js函数，elemets仍在创建中。我建议使用

$（document）.ready（function（）{}）

，这样脚本只在创建DOM之后执行。我只是再解释一遍，因为他在问为什么他要这么做。例如，如果他这样做了：

<html>

<head>
<script src="raphael.js"></script>
<script src="jquery-1.7.2.js"></script>

<script type="text/javascript">
$(document).ready(function(){ //all your javascript goes here  
var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});
}
)
</script>

</head>

<body>

<div id="sample-2" style="width:500px; height:500px;">

</div>

</body>

</html>

您可以在以下位置查看要绑定的文档：以及位于以下位置的.ready（）

问题解决了！感谢所有帮助您的人。他的意思是，在您与DOM交互之前，必须在DOM中绘制并插入放置图像的div，在将新指令应用到DOM之前，当您放置等待页面加载的onload处理程序时，如果您将其放在DIV之后，您就确保代码在创建DIV之后执行，我建议使用onload。显然，所有这些都应该包含在一个

$（document.ready（function（）{//code}）

@SamuelLopez中。您的解释有点让人困惑<代码>显然，所有这些都应该包含在$（文档）中。ready（function（）{//code}）不准确，我已经在答案中添加了解释。我不需要解释，不需要标记我。我只是说你的解释不清楚。

$('#form').on('blur', '#input', function(){
 // code

})