Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptとSVGを使用してスクロールで描画する方法は？

JavaScriptとSVGを使用してスクロールで描画するには、コードは次のとおりです-

例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
   body {
      height: 2000px;
      background: #f1f1f1;
   }
   svg {
      position: fixed;
      top: 15%;
      width: 400px;
      height: 210px;
      margin-left: -50px;
   }
</style>
</head>
<body>
<h1>Scroll Using JavaScript and SVG example</h1>
<svg>
<path
fill="none"
stroke="purple"
stroke-width="5"
id="polygon"
d="M 150 350 Q 150 50 250 150 Q 250 550 300 150 Q 350 50 400 300"/>
</svg>
<script>
   var polygon = document.getElementById("polygon");
   var length = polygon.getTotalLength();
   polygon.style.strokeDasharray = length;
   polygon.style.strokeDashoffset = length;
   window.addEventListener("scroll", drawPoly);
   function drawPoly() {
      var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) /
(document.documentElement.scrollHeight - document.documentElement.clientHeight);
      var draw = length * scrollpercent;
      polygon.style.strokeDashoffset = length - draw;
   }
</script>
</body>
</html>

出力

上記のコードは次の出力を生成します-

JavaScriptとSVGを使用してスクロールで描画する方法は？

ページの一番下までスクロールすると-

JavaScriptとSVGを使用してスクロールで描画する方法は？


  1. Javaを使用してOpenCVで塗りつぶされたポリゴンを描画するにはどうすればよいですか？

    Java OpenCVライブラリのorg.opencv.imgprocパッケージには、Imgprocという名前のクラスが含まれています。塗りつぶされたポリゴンを描画するには、 fillPoly（）を呼び出す必要があります。 このクラスのメソッド。このメソッドは、次のパラメーターを受け入れます- ポリゴンが描画される画像を表すマットオブジェクト。 タイプMatOfPointのオブジェクトを保持するリストオブジェクト。 ポリゴンの色を表すScalarオブジェクト。 線種を表す整数。 例 import java.util.ArrayList; import java.ut

  2. Javaを使用してOpenCVでポリゴンを描画するにはどうすればよいですか？

    すべての内角が180未満のポリゴンは、凸多角形と呼ばれます。 Java OpenCVライブラリのorg.opencv.imgprocパッケージには、Imgprocという名前のクラスが含まれています。ポリゴンを描画するには、 fillConvexPoly（）を呼び出す必要があります このクラスのメソッド。このメソッドは3つのパラメーターを受け入れます- ポリゴンが描画される画像を表すマットオブジェクト。 MatOfPointオブジェクトは、その間にポリゴンが描画されるポイントを指します。 ポリゴンの色を表すScalarオブジェクト。 例 import org.opencv.