0

コンピューターによる直線ではなく、自然なラインの作成を試みています。私は現在これをやっています：

CSS:

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

HTML:

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

しかし、これは私に直線を与えます。必要に応じて css と javascript を使用して自然なラインを実現する方法はありますか?

ありがとう

4

4 に答える 4

3

cssを使えば何でも描けます。100px x 100px の div があるとします。この div には、1px x 1px の 10000 個の div セルがあります。css を使用してすべてのセルの色を好きなように変更できるため、画像を表示することもできます。

このウェブサイトをご覧ください: http://neil.fraser.name/software/img2html/

画像をアップロードすると、この画像を表示する html が作成されます。tux.jpg でわかるように、3kB の画像と比較して、サイズが 280kB を超えています。したがって、ご覧のとおり、意味がありません。あなたが達成したいこともありません。

線を引いて画像として保存し、Web サイトに配置するだけです。

編集: 他の誰かが言及したようにキャンバスを使用することもできますが、古いブラウザーや js が無効になっているブラウザーでは機能しません。そのためにキャンバスを使用するのも少しやり過ぎです..

于 2012-07-01T10:47:32.697 に答える
1

画像が欲しいようですね。本当に JavaScript でやりたい場合は、この素晴らしいチュートリアルのようにキャンバスを使用してみてください。

編集：私の2番目のリンクは間違っていて、かなり面白いように見えました. ごめん！

于 2012-07-01T10:46:25.703 に答える
1

いくつかのソリューションがあります (画像、SVG、キャンバス)。最も簡単で最も確実な方法は、Illustrator (または、おそらく...inkscape) などで画像を作成し、それをレンダリングすることです。

よりスケーラブルなものが必要な場合は、上記のいずれかのプログラムで SVG が提供されます。

このためにキャンバスをスキップします。

于 2012-07-01T10:48:01.857 に答える
0

あなたが探しているのは、div を使用して行を作成するライブラリだと思います。私は過去にこれを使用しましたが、うまくいきました。楕円の場合は少し改善できます。

とにかく、当時は 2009 年であり、HTML5 はまだ非常に遠い時代だったので、私はそれを使用しました。現在、同じ効果を生み出すためのより現代的な方法があります。

于 2012-07-01T10:50:44.187 に答える