Question

我正在寻找一种方法，将x []，y []作为画布上的坐标，它会在（x，y）对上绘制一个脉动环。

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;
    position: absolute;
    left:20px;
    top:20px;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    opacity: 0.0
}
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

类似于：http://jsfiddle.net/HQV6m/

我真的不想把div放在画布上，所以我希望有更好的解决方案。

提前致谢。

Answer 1

您可以使用缓动功能“脉冲”高亮环。

以下是一个示例和一个演示：http://jsfiddle.net/m1erickson/JYP8T/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    #canvas{border:1px solid red;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    // set the context styles
    ctx.lineWidth=1;
    ctx.strokeStyle="gold";
    ctx.fillStyle="#888";

    // variables used to draw & animate the ring
    var PI2=Math.PI*2;
    var ringX,ringY,ringRadius,ingCounter,ringCounterVelocity;

    // fill the canvas with a background color
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // tell handleMouseDown to handle all mousedown events
    $("#canvas").mousedown(function(e){handleMouseDown(e);});

    // set the ring variables and start the animation
    function ring(x,y){
        ringX=x;
        ringY=y;
        ringRadius=0;
        ringCounter=0;
        ringCounterVelocity=4;

        requestAnimationFrame(animate);
    }

    // the animation loop
    function animate(){

        // return if the animation is complete
        if(ringCounter>200){return;}

        // otherwise request another animation loop
        requestAnimationFrame(animate);

        // ringCounter<100 means the ring is expanding
        // ringCounter>=100 means the ring is shrinking
        if(ringCounter<100){ 
            // expand the ring using easeInCubic easing
            ringRadius=easeInCubic(ringCounter,0,15,100); 
        }else{ 
            // shrink the ring using easeOutCubic easing
            ringRadius=easeOutCubic(ringCounter-100,15,-15,100);
        }

        // draw the ring at the radius set using the easing functions
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(ringX,ringY,ringRadius,0,PI2);
        ctx.closePath();
        ctx.stroke();

        // increment the ringCounter for the next loop
        ringCounter+=ringCounterVelocity;
    }


    //  Robert Penner's easing functions
    //
    //  https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
    //
    //  now=elapsed time,
    //  startValue=value at start of easing,
    //  deltaValue=amount the value will change during the easing,
    //  duration=total time for easing

    function easeInCubic(now, startValue, deltaValue, duration) {
      return deltaValue*(now/=duration)*now*now + startValue;
    }
    function easeOutCubic(now, startValue, deltaValue, duration) {
      return deltaValue*((now=now/duration-1)*now*now + 1) + startValue;
    }


    // handle mousedown events
    function handleMouseDown(e){

      // tell the browser we'll handle this event
      e.preventDefault();
      e.stopPropagation();

      // calc the mouse position
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // animate a ring at the mouse position
      ring(mouseX,mouseY);

    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Click in the canvas to draw animated circle with easings.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

HTML5 Canvas Pulsate

1 个答案: