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

Question

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

CSS：

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

HTML：

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

但这会给我一条直线。有没有办法在必要时使用 css 和 javascript 完成一条看起来很自然的线条？

谢谢

Answer 1

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

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

您可以上传图片，您最终会得到呈现此图片的 html。正如您在 tux.jpg 中看到的那样，与 3kB 的图像相比，您得到的大小 > 280kB。所以你可以看到它没有意义。你想要达到的也没有。

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

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

Answer 2

听起来你想要一个图像。如果你真的想用 javascript 来做，试着像这个很棒的教程一样使用画布。

编辑：我的第二个链接是错误的，看起来很滑稽。对不起！

Answer 3

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

如果您想要更具可扩展性的东西，上面提到的任何一个程序都会给您一个 SVG。

为此跳过画布。

Answer 4

我认为您正在寻找的是一个使用 div 创建线条的库。我过去用过这个，它成功了。对于椭圆，我可以稍微改进一下。

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