순수한 js 는 나무 한 그루 를 그 리 는 예 를 실현 한다

순수한 js 로 나무 한 그루 를 그리다.생각:
1.나무의 그림 을 페이지 배경 으로 합 니 다.
2.html 5 의 canvas 캔버스 를 통 해 가 립 니 다.
3.시간 당 10ms 간격 으로 아래 에서 위로 1px 의 마스크 를 제거 합 니 다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My JS tree</title>
<style>
body {
  width: 1000px;
  height: 570px;
  background-image: url(image/tree.png);
  background-size: 1000px, 570px;
  background-repeat: no-repeat;
  margin-top: 0px;
  margin-bottom: 0px;
}
</style>
</head>

<body>
  <canvas id="mycanvas" width="1000px" height="570px"></canvas>

  <script>
    var c = document.getElementById("mycanvas");
    var ctx = c.getContext("2d");

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, c.width, c.height);//        

    var y = c.height;

    window.setInterval(function() {
      if (y > 2) {
        ctx.clearRect(0, y - 1, c.width, y);
        y = y - 1;
      } else {
        window.clearInterval(this);//    
        ctx.clearRect(0, 0, c.width, c.height);
      }
    }, 10);//  10ms  1px   
  </script>
</body>
</html>
그림 을 그 리 는 과정 은 다음 과 같다.

이상 의 이 순수한 js 가 나 무 를 그 리 는 예 는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기