Bagaimana untuk menggambar semasa bergerak

menggambar semasa bergerak

使用 SVG dan JavaScript untuk menggambar segitiga semasa bergerak - sila perhatikan, ia mesti <path> Elemen: }}

Contoh

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Mendapatkan elemen <path> dengan ID "triangle".
var triangle = document.getElementById("triangle");
// Mendapatkan panjang elemen <path>.
var length = triangle.getTotalLength();
// Tempat awal perecakan gambar (atur mode garis garis). Di sini diatur ke nilai yang sama seperti panjang jalur, yang sebenarnya adalah untuk melihat seluruh jalur sebagai "garis garis besar".
triangle.style.strokeDasharray = length;
/* Menetapkan offset garis garis. Pada awalnya diatur ke panjang jalur, sehingga jalur keseluruhan akan dihalangi keluar tampilan, sehingga segitiga akan disembunyikan. */
Dengan gerakan penarikan, offset ini akan menurun secara perlahan, sehingga segitiga akan muncul perlahan.
Menghapus baris kode ini dapat menampilkan segitiga sebelum perecakan.
triangle.style.strokeDashoffset = length;
// Melihat kegerakan jendela, dan memanggil fungsi myFunction saat terjadi gerakan.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Menghitung persen gerakan = (tinggi gerakan saat ini) / (tinggi yang dapat digerakkan keseluruhan).
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Menghitung panjang yang seharusnya dikerajakan = panjang keseluruhan * persen gerakan.
  var draw = length * scrollpercent;
  // Apabila dikejar ke atas, sebenarnya adalah perecakan balik (dari lengkap ke tak lengkap), jadi di sini digunakan panjang keseluruhan yang diambil untuk mengurangkan panjang yang seharusnya dikerajakan.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

亲自试一试

相关页面

教程：SVG 教程