如何在滚动时绘图

滚动绘图

使用 SVG 和 JavaScript 在滚动时绘制三角形 - 请注意，它必须是 <path> ইলেমেন্ট:}

ইনস্ট্যান্স

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// "triangle" ID ভুক্ত পথইলেমেন্টটি পাওয়া হবে
var triangle = document.getElementById("triangle");
// <path> ইলেমেন্টের দৈর্ঘ্য পাওয়া হবে
var length = triangle.getTotalLength();
// অফসেটকরণের ভাবনা (ড্যাশলাইন মোড) সেট করা হবে।এখানে, পথের দৈর্ঘ্য হতে সেট করা হয়, যার ফলে সমস্ত পথকে 'বড় ড্যাশলাইন' হিসাবে দেখানো হবে。
triangle.style.strokeDasharray = length;
/* ড্যাশলাইন অফসেট সেট করা।প্রাথমিকভাবে, পথের দৈর্ঘ্য হতে সেট করা হয়, যাতে সমস্ত পথ ভিউ থেকে অফসেট করা হয়, যার ফলে ত্রিকোণটি লুকিয়ে থাকবে।
সরণের সাথে, এই অফসেটটি ক্রমশঃ হ্রাস পাবে, যার ফলে ত্রিকোণটি ক্রমশঃ দেখানো হবে。
এই লাইন মুছে দিলে সরণ প্রক্রিয়ার আগে ত্রিকোণটি দেখানো যাবে。
triangle.style.strokeDashoffset = length;
// উপরের উল্লেখিত সরণ ইভেন্টটি শুনানো হবে, যখন সরণ হবে তখন মাই ফাংশন কল করা হবে。
window.addEventListener("scroll", myFunction);
function myFunction() {
  // সরণ প্রতিশত গণনা = (বর্তমান সরণ উচ্চতা) / (মোট সরণযোগ্য উচ্চতা)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // যে দৈর্ঘ্যটি সুপারিশিত হবে গণনা = মোট দৈর্ঘ্য * সরণ প্রতিশত
  var draw = length * scrollpercent;
  // উপরে সরণের সময়, তাৎক্ষণিকভাবে অপসারণ করা হয় (সম্পূর্ণ থেকে অসম্পূর্ণ), তাই এখানে মোট দৈর্ঘ্য থেকে সুপারিশিত দৈর্ঘ্য হতে কমানো হয়。
  triangle.style.strokeDashoffset = length - draw;
}

亲自试一试

相关页面

教程：SVG 教程