JavaScript+html5 canvas_javascript 스킬로 그린 아크 스윙 효과 완성예-JS 튜토리얼-php.cn

JavaScript+html5 canvas_javascript 스킬로 그린 아크 스윙 효과 완성예

WBOY

풀어 주다： 2016-05-16 15:17:59

원래의

1834명이 탐색했습니다.

본 글의 예시에서는 JavaScript+html5 캔버스로 그리는 아크 스윙 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   #canvas {
    margin:50px; border:5px solid gray; box-shadow:0px 0px 5px 5px #494949;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
 </body>
 <script type="text/javascript">
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var r_x = 250, r_y = 0;
  var offset_h = 250;
  var offset_w = 500;
  var count = 0;
  var mode = "up";
  var temp = 0;
  var getRPoint = function(x, y) {
   var r = (Math.pow(x, 2) + Math.pow(y, 2)) / (2 * y);
   var point = {
    x: x,
    y: Math.abs(250 - (r - y)),
    r: r
   };
   return point;
  };
  function arc(attrs) {
   ctx.beginPath();
   ctx.arc(attrs.x, attrs.y, attrs.r, attrs.startAngle || 0, attrs.endAngle || Math.PI);
   ctx.stroke();
  }
  var interval = setInterval(function() { 
   count++;
   switch(mode) {
    case "up":
     temp = count;
     ctx.clearRect(0, 0, 500, 500);
     if(count%18 == 0) {
      mode = "down";
      return;
     } 
    break;
    case "down":
     temp = 36 - count;
     ctx.clearRect(0, 0, 500, 500);
     if(count%36 == 0) {
      mode = "default";
      return;
     }     
    break;
    case "default":
     temp = count - 36;
     if(count%54 == 0) {
      mode = "up";
      count = 0;
      return;
     }
   }
   arc(getRPoint(250, 250-8*temp));
  }, 100);
 </script>
</html>

로그인 후 복사

js 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 요약"을 확인할 수 있습니다. jQuery의 특수 효과"

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.