javascript - 画线的编码问题

Question

我想在照片部分和文本部分之间画一条水平线作为中断。

这是我的网站：

http://violetoeuvre.com/

这是它工作的jsfiddle：

http://jsfiddle.net/GCxh9/

 <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

我已经把它放在了头上。这是我的html：

<!-- CONTENT____________________________________________-->

<div class="content_wrapper">

<!-- Photo __________________________________________-->

    <div class="home_photo">
    </div>

    <canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>
<!-- About___________________________________________________-->

    <div class="home_text">
        <p>Emma Carmichael is a writer and editor based in Brooklyn, NY, although she hails from Brattleboro, VT. Emma graduated from Vassar College in 2010 with a degree in Urban Studies; ETC...
    </p>
    </div>

</div>

它显然在做某事，因为元素之间有额外的空间。有任何想法吗？

谢谢！

Answer 1

这里有几点。

1. 您正在设置高度 = 100。这导致了额外的空间

2. 如果您使用的是 chrome，它会添加自己的样式。在这种情况下，下面的 div 'home_text' 有一个<p>which chromes 适用

   p { -webkit-margin-before: 1em; -webkit-margin-after：1em；-webkit-margin-start：0px；-webkit-margin-end：0px；}

最好在您的网站上使用 reset.css 或类似的东西。

使用画布创建分隔线可能不是最佳方式。为什么不只是拥有<div>并设置它的width,height和background-color: black;

Answer 2

var c=document.getElementById("myCanvas");正在返回未定义的对象。

屏幕截图：

将此代码保留在该行之后的任何位置<canvas id="myCanvas" width="980" height="100" style="border:0px solid #d3d3d3;"></canvas>

<script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        ctx.moveTo(0,0);
        ctx.lineTo(980,0);
        ctx.stroke();

</script>

在关闭 </body>网页的body标签之前最好保留上面的脚本