如何在滚动时绘图

滚动绘图

使用 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>
// ID ਵਾਲਾ "triangle" <path> ਐਲੀਮੈਂਟ ਪ੍ਰਾਪਤ ਕਰੋ
var triangle = document.getElementById("triangle");
// <path> ਐਲੀਮੈਂਟ ਦੀ ਲੰਬਾਈ ਪ੍ਰਾਪਤ ਕਰੋ
var length = triangle.getTotalLength();
// ਪਾਥ ਦੀ ਸ਼ੁਰੂਆਤੀ ਸਥਾਨ (ਵਿਰਲਾ ਮੋਡ ਸੈਟ ਕਰੋ।ਇੱਥੇ ਇਸ ਨੂੰ ਪਾਥ ਲੰਬਾਈ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਪੂਰਾ ਪਾਥ ਇੱਕ "ਵੱਡਾ ਵਿਰਲਾ" ਦੇ ਰੂਪ 'ਚ ਦਿਸਦਾ ਹੈ।)
triangle.style.strokeDasharray = length;
/* ਵਿਰਲਾ ਉਚਾਈ ਸੈਟ ਕਰੋ।ਮੁੱਢਲੇ ਵਿੱਚ ਇਸ ਨੂੰ ਪਾਥ ਲੰਬਾਈ ਨਾਲ ਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਪੂਰਾ ਪਾਥ ਦਿਸ਼ਾ ਨਾਲ ਹੀ ਸ਼ਾਮਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤ੍ਰਿਕੋਣ ਛੂਟ ਜਾਂਦਾ ਹੈ।
ਸਰਕਲ ਨਾਲ ਸਰਕਲ ਹੋਣ ਨਾਲ ਇਹ ਉਚਾਈ ਪ੍ਰਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਘਟਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਤ੍ਰਿਕੋਣ ਹੋਰ ਵੱਧ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ。
ਇਹ ਕੋਡ ਹਟਾਉਣ ਨਾਲ ਸਰਕਲ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਤੱਕ ਤ੍ਰਿਕੋਣ ਦਿਖਾਇਆ ਜਾ ਸਕਦਾ ਹੈ。*/
triangle.style.strokeDashoffset = length;
// ਵਿੰਡੋ ਦੇ ਸਰਕਲ ਈਵੈਂਟ ਨੂੰ ਨਿਗਰਾਨੀ ਕਰਨਾ, ਅਤੇ ਸਰਕਲ ਹੋਣ ਉੱਤੇ myFunction ਫੰਕਸਨ ਚਲਾਉਣਾ。
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 教程