Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm thế nào để vẽ các sóng sin bằng HTML5 SVG?


Để vẽ sóng hình sin bằng SVG, hãy sử dụng công cụ sau gần gần đúng với một nửa sóng hình sin. Tôi đã sử dụng một phép gần đúng khối-bezier. Sử dụng phần tử .

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <title>SVG</title>
      <meta charset = "utf-8" />
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Sine Waves</h2>
      <svg width = "150px" height = "200px" viewBox = "0 0 100 100">
         <path stroke = "#00FF00" fill = "none" d = "M0,0 C36.42,0,70.58,100,100,100" />
      </svg>
   </body>
</html>

Đầu ra

Làm thế nào để vẽ các sóng sin bằng HTML5 SVG?