Paano magpipinta habang inililipat

Pagpipinta habang inililipat

Ginagamit ang SVG at JavaScript sa pagpipinta ng tatsulok habang inililipat - pakiingatan, ito ay dapat <path> Element: }}

Sample

<svg id="mySVG">
  <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z"/>
</svg>
<script>
// Pagkuha ng <path> element na may ID na "triangle"
var triangle = document.getElementById("triangle");
// Pagkuha ng haba ng <path> element
var length = triangle.getTotalLength();
// Posisyon ng pagsisimula ng pagpipinta (pagtatakda ng mode ng linya). Dito ay itinatakan ang halaga ng haba ng linya, na nagbibigay ng buong daan bilang isang "malaking linya".
triangle.style.strokeDasharray = length;
/* Pagtatakda ng halaga ng pag-offset ng linya. Sa simula ay itinatakan ang haba ng linya, na nagbibigay sa buong daan ng pag-offset sa panoorin, na nag-ihiwalay ng tatsulok.
Sa paggalaw, ang halaga ng pag-offset ay paglalampas, na nagpapakita ng tatsulok pagdami-dami.
Alisin itong linya upang ipakita ang tatsulok bago magpipinta sa paggalaw.
triangle.style.strokeDashoffset = length;
// Pagmamasdan ng pangkasalukuyang paggalaw ng window, at pagtakbo ng function myFunction kapag may paggalaw.
window.addEventListener("scroll", myFunction);
function myFunction() {
  // Pagtutuos ng porsyento ng paggalaw = (ang kasalukuyang taas ng paggalaw) / (ang kabuuan ng taas na pwedeng galawin)
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
  // Pagtutuos ng haba ng pagpipinta = kabuuan ng haba * porsyento ng paggalaw
  var draw = length * scrollpercent;
  // Saan ng gumagalaw pataas, ang pagpipinta ay kumikontra (mula sa kumpleto hanggang hindi kumpleto), kaya ginagamit dito ang kabuuan ng haba sa kabuuan ng pagpipinta.
  triangle.style.strokeDashoffset = length - draw;
}
</script>

亲自试一试

相关页面

教程：SVG 教程