jquery+svg实现svg三角正弦余弦实验动画效果代码-html代码-BFW代码库

jquery+svg实现svg三角正弦余弦实验动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery+svg实现svg三角正弦余弦实验动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body{
          margin:0;
          padding:0;
          background:#114488;
        }
    </style>



</head>

<body>
    <svg width="640" height="480">
  <rect x="100" y="100" width="200" height="200" stroke="#5577aa" fill="transparent"/>
  <path d="M200 100 L200 300 M100 200 L300 200" stroke="#5577aa" fill="transparent"/>
  <text x="200" y="90" font-family="sans-serif" font-size="15" text-anchor="middle" fill="white">0º</text>
  <text x="310" y="205" font-family="sans-serif" font-size="15" fill="white">90º</text>
  <text x="200" y="320" font-family="sans-serif" font-size="15" text-anchor="middle" fill="white">180º</text>
  <text x="90" y="205" font-family="sans-serif" font-size="15" text-anchor="end" fill="white">360º</text>
  
  <!-- Arc -->
  <path d="M200 100" fill="transparent" stroke="white" id="my-arc-01"/>
  
  <!-- Sin -->
  <path d="M100 350 L300 350" stroke="#5577aa" fill="transparent"/>
  <path d="M200 350" stroke="white" id="line-sin" fill="transparent"/>
  <text x="200" y="370" font-family="sans-serif" font-size="15" text-anchor="middle" fill="white">Sin</text>
  <text x="310" y="355" font-family="sans-serif" font-size="15" fill="white">1</text>
  <text x="90" y="355" font-family="sans-serif" font-size="15" text-anchor="end" fill="white">-1</text>
  
  <!-- Cos -->
  <path d="M350 100 L350 300" stroke="#5577aa" fill="transparent"/>
  <path d="M350 200" stroke="white" id="line-cos" fill="transparent"/>
  <text x="360" y="205" font-family="sans-serif" font-size="15" fill="white">Cos</text>
  <text x="350" y="90" font-family="sans-serif" font-size="15" text-anchor="mi.........完整代码请登录后点击上方下载按钮下载查看