円の脈動のインクリメント

私はキャンバスにイメージ領域と脈動アニメーションを持つ円を作成する作業コードを持っています。私は赤丸の2倍をクリックすると速く脈動し、非常に高速です。脈動のペースが一致するようにコードをどのように変更しますか？円の脈動のインクリメント

はここに私のHTMLです

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5 input </title> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" /> 
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<style> 
    canvas 
    { 
     pointer-events: none; /* make the canvas transparent to the mouse - needed since canvas is position infront of image */ 
     position: absolute; 
    } 

    area{ 
    position: absolute; 
    border:none; 
    } 

    </style> 
     </head> 
     <body> 
     <body id="myBodyId" > 

     <canvas id='canvas'></canvas> 
     <center> 
     <div id="myDiv1"> 

     <img src="https://s12.postimg.org/sflskn1y5/shapes.jpg" id="pinch-zoom-image-id" usemap="#image-map"/> 

     </div> 
     <map name="image-map"> 

       <area shape="circle" onclick="getid(this.coords)" coords="101,81,36" href="#"> 
       <area shape="circle" onclick="getid(this.coords)" coords="148,81,12" nohref > 
       <area shape="circle" onclick="getid(this.coords)" coords="100,81,59" href="#"> 

     </center> 
    </body>  
    </html> 

     </body> 
    </html>

スクリプト

function byId(e){return document.getElementById(e);} 
window.onload = function(){ 
    } 

    var hdc; 
    var angle = 0; 
    var coord; 

    var requestAnimationFrame = window.requestAnimationFrame || 
           window.mozRequestAnimationFrame || 
           window.webkitRequestAnimationFrame || 
           window.msRequestAnimationFrame;          

    function getid(coordStr){ 

      coord = coordStr.split(','); 
      myHover();    
    } 

    var ringRadius = 0; 
    var ringCounter = 0; 

    function myHover() 
    { 

     var img = byId('pinch-zoom-image-id'); 

     var x,y, w,h; 

     // get it's position and width+height 
     x = img.offsetLeft; 
     y = img.offsetTop; 
     w = img.clientWidth; 
     h = img.clientHeight; 

     // move the canvas, so it's contained by the same parent as the image 
      var imgParent = img.parentNode; 
      var can = byId('canvas'); 
      imgParent.appendChild(can); 

      // place the canvas in front of the image 
      can.style.zIndex = 1; 

      // position it over the image 
      can.style.left = x+'px'; 
      can.style.top = y+'px'; 

      // make same size as the image 
      can.setAttribute('width', w+'px'); 
      can.setAttribute('height', h+'px'); 

      // get it's context 
      hdc = can.getContext('2d'); 

     // set the 'default' values for the colour/width of fill/stroke operations 
      hdc.fillStyle = 'red'; 
      hdc.strokeStyle = 'red'; 
      hdc.lineWidth = 4; 

      var can = document.getElementById("canvas"); 
      hdc = can.getContext('2d'); 

      var canvasWidth = can.width; 
      var canvasHeight = can.height; 
      hdc.clearRect(0, 0, canvasWidth, canvasHeight); 

       // color in the background 
       hdc.fillStyle = "#EEEEEE"; 
       //hdc.fillRect(0, 0, canvasWidth, canvasWidth); 
       hdc.beginPath(); 

       var radius = 5 + 50 * Math.abs(Math.cos(angle)); 
       hdc.arc(coord[0], coord[1], radius, 0, Math.PI * 2); 
       hdc.closePath(); 
       //console.log("radius"+radius); 

       hdc.strokeStyle = '#003300'; 
       hdc.stroke(); 
       angle += Math.PI/84; 

       requestAnimationFrame(myHover); 

     }

出典

2016-10-07 JessieBear

をユーザーが初めてクリックしたときにボタンを無効にすることができ、私は円が、それがある場合は、再度myHoverを呼び出して脈動し、されていない場合、保存することをお勧め。 – Pirate

問題は、再帰関数myHoverあなたが円をクリックするたびに呼び出すことです。

var pulsating = false 
window.getid = function(coordStr) { 
    coord = coordStr.split(','); 
    if (!pulsating) { 
     pulsating = true 
     myHover(); 
    } 
}

は、ここでそれをチェックアウト：https://jsfiddle.net/fbooygo4/

出典

2016-10-07 09:29:56

ありがとうございます！ – JessieBear

円の脈動のインクリメント

答えて

関連する問題