스크롤링 시 드로잉하는 방법

JavaScript와 SVG를 사용하여 스크롤링 시 드로잉을 배우는 방법.

직접 시도해 보세요

스크롤링 드로잉

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;
}
</script>

직접 시도해 보세요

관련 페이지

강의:SVG 강의