用画线的编码问题

我想画一个水平线作为照片部分和文本部分之间的中断。用画线的编码问题

这里是我的网站：

这里就是它的工作的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>

这显然是做一些事情，因为元素之间有额外的空间。有任何想法吗？

谢谢！

来源

2013-03-26 Claire

你不能只使用'

'元素吗？ – Pointy 2013-03-26 18:59:54

我试过了，但即使我指定了黑色，它仍然是一个白色的盒子。它也有一个奇怪的边界。明白了吗？ http://jsfiddle.net/GCxh9/1/ – Claire 2013-03-26 19:04:33

[它只是需要适当的样式]（http://jsfiddle.net/kJNan/） – Pointy 2013-03-26 19:10:47

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

屏幕截图：

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标签</body>之前

来源

2013-03-26 19:08:03

非常感谢你！ – Claire 2013-03-26 19:19:29

欢迎克莱尔。 :) – 2013-03-26 19:22:46

这里有几点。

您正在设置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或在您的网站类似的东西。

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

来源

2013-03-26 19:06:41

我明白了。这对于一条简单的线路来说似乎相当复杂。如果我使用

标签，为什么它会在颜色周围创建奇怪的边框？ http：// jsfiddle。net/GCxh9/1/ – Claire 2013-03-26 19:09:05

@Claire这个'

'标签有一些隐含的样式。由于您左侧的框紧邻，因此您也可以只给顶框一个底部边框。 – Pointy 2013-03-26 19:11:50

我的猜测是......你不需要设置'height：2px;'它只是一个分隔符......再次，不同的浏览器对html元素有不同的本地样式。 – 2013-03-26 19:13:28

用画线的编码问题

回答

相关问题