如何使用css和javascript创建一条看起来很自然的线条？

Question

我正在尝试用计算机来创建一条看起来自然的线条，而不是笔直的线条。我目前正在做这件事：

CSS：

#line {
width: 600px;
height: 1px;
background-color: black;
}

HTML：

<div id="line"></div>

但这会给我一条直线。如果有必要的话，有没有办法用css和javascript实现一条看起来很自然的线条呢？

谢谢

Answer 1

使用css，您可以绘制任何内容。假设你有一个div 100px x 100px。在这个div中，你有10000个1px x 1px的div单元格。您可以使用css将每个单元格的颜色更改为您想要的任何颜色，因此您甚至可以呈现图像。

看看这个网站：http://neil.fraser.name/software/img2html/

您可以上传图像，最终将得到呈现此图像的html。如你所见，与3kB的图片相比，tux.jpg的大小超过280kB。所以正如你所看到的，这是没有意义的。你想要实现的目标也不是。

只需绘制一条线，将其保存为图像，并将其放在您的网站上。

编辑:你也可以像其他人提到的那样使用画布，但它不能在旧浏览器或禁用了js的浏览器上工作。使用canvas来实现这一点也有点夸张。

Answer 2

听起来你想要个image。如果你真的想用javascript来做这件事，试着像在this awesome tutorial中那样使用canvas。

编辑：我的第二个链接是错误的，看起来很滑稽。抱歉的!

Answer 3

有许多解决方案(图像、SVG、画布)。最简单和最防弹的是在Illustrator之类的东西中制作一个图像(或者，可能更有可能是……inkscape)并渲染它。

如果您想要更具伸缩性的程序，上面提到的两个程序都可以为您提供SVG。

跳过这个的画布。