畫線的編碼問題

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>

   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> 之前，最好保留上面的腳本