如何使用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个div单元格，1px x 1px。您可以使用css将每个单元格的颜色更改为您想要的任何颜色，这样您甚至可以呈现图像。

查看此网站：http://neil.fraser.name/software/img2html/

您可以上传图片，最终会出现显示此图片的html。正如你在tux.jpg中看到的，你得到了＆gt;与3kB图像相比，尺寸为280kB。所以你可以看到它没有意义。你想要达到的目标也没有。

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

编辑： 您也可以像其他人提到的那样使用canvas，但它不能用于旧浏览器或禁用js的浏览器。使用画布也有点矫枉过正..

Answer 2

听起来像是想要image。如果您真的想在javascript中使用它，请尝试使用this awesome tutorial中的画布。

编辑：我的第二个链接错了，看起来非常滑稽。遗憾！

Answer 3

有许多解决方案（图像，SVG，画布）。最简单，最防弹的方法就是在Illustrator中制作一个图像（或者更可能是...... inkscape）并渲染它。

如果你想要更具伸缩性的东西，上面提到的程序都会给你一个SVG。

为此跳过画布。

Answer 4

我认为你正在寻找的是一个使用div来创建线条的库。我过去使用this one，它就是诀窍。我可以用椭圆来改进它。

但无论如何，我使用它是因为它是2009年，HTML5仍然很遥远。现在有更现代的方法来创造相同的效果。