CSS 및 어쩌면 자바 스크립트를 사용하여 자연스러운 선을 만드는 방법은 무엇입니까?

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에는 1px x 1px의 10000 div 셀이 있습니다. CSS를 사용하여 모든 셀의 색상을 원하는대로 변경할 수 있으므로 이미지를 표시 할 수도 있습니다. http://neil.fraser.name/software/img2html/

당신은 이미지를 업로드 할 수 있으며이 이미지를 제시 HTML로 끝날 것

는이 웹 사이트에서보세요. tux.jpg에서 볼 수 있듯이 3kB 이미지와 비교하여 280kB가 넘습니다. 보시다시피 이치에 맞지 않습니다. 또한 당신이 달성하기를 원하는 것도하지 않습니다.

그냥 선을 그어 이미지로 저장하고 웹 사이트에 저장하십시오.

EDIT : 다른 사람이 언급 한 것처럼 캔버스를 사용할 수도 있지만 이전 브라우저 또는 js를 사용하지 않는 브라우저에서는 작동하지 않습니다. 그것도 캔버스를 사용하기에는 너무 잔인합니다.

Answer 2

당신처럼 소리

감사는 image를 원한다. 당신이 정말로 javascript에서 그것을하고 싶다면, this awesome tutorial 에서처럼 캔버스를 사용해보십시오.

편집 : 내 두 번째 링크가 잘못되어 매우 귀엽습니다. 죄송합니다!

Answer 3

여러 가지 솔루션 (이미지, SVG, 캔버스)이 있습니다. 가장 쉽고 가장 방탄하는 것은 일러스트 레이터와 같은 것으로 이미지를 만드는 것입니다 (아니면 아마도 잉크 스케이프 일 가능성이 높습니다).

위에서 언급 한 프로그램 중 어느 것이 든 확장 성이 좋은 프로그램을 원한다면 SVG를 줄 것입니다.

이 경우 캔버스를 건너 뜁니다.

Answer 4

당신이 찾고있는 것은 div를 사용하여 선을 만드는 라이브러리라고 생각합니다. 나는 과거에 this one을 사용했고 트릭을했습니다. 나는 타원에 대해서는 약간 향상시킬 수있다.

하지만 어쨌든 2009 년이고 HTML5는 여전히 아주 멀리 떨어져 있기 때문에 사용했습니다. 이제는 같은 효과를 내기위한보다 현대적인 방법이 있습니다.