Question

我想画一条水平线作为照片部分和文字部分之间的间隔。

这是我的网站：

这是jsfiddle工作的地方：

 <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

这里有几点。

您正在设置height = 100。这导致了额外的空间
如果您使用的是chrome，它会添加自己的样式。在这种情况下，下面的div'home_text'有<p>适用的chromes

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

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

使用canvas创建分隔符可能不是最佳方式。为什么不只是<div>并设置其width，height和background-color: black;

Answer 2

var c=document.getElementById("myCanvas");正在返回Undefined对象。

屏幕截图：

enter image description here

将此代码保留在行<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>之前保留上述脚本

绘制线条的编码问题

2 个答案: