圆脉动增量

Circle pulsation increments

本文关键字：脉动      更新时间：2023-09-26

我有下面的工作代码，创建一个圆圈在画布上的图像区域和脉动动画。我的问题是，如果我点击两次红色圆圈，它会跳动得更快，如果再次点击，它会再次快速跳动。如何将代码改变，使节奏脉动一致。

这是我的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);
        }

问题是每次点击圆圈时调用递归函数myHover。如果圆圈是脉动，我建议存储，如果它是:

，不要再次调用myHover。
var pulsating = false
window.getid = function(coordStr) {
    coord = coordStr.split(',');
    if (!pulsating) {
        pulsating = true
        myHover();
    }
}

点击这里查看:https://jsfiddle.net/fbooygo4/

相关文章：