Question

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

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

        }

Answer 1

问题是每次单击圆圈时都会调用递归函数myHover。如果圈子是脉动的话我会建议存储，如果是：

则不再调用myHover

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

请在此处查看：https://jsfiddle.net/fbooygo4/

圆脉动增量

1 个答案: