Fatal编程技术网
  • html/
  • HTML5画布脉动

HTML5画布脉动

html canvas

HTML5画布脉动,html,canvas,drawing,Html,Canvas,Drawing,我正在寻找一种方法，将x[]，y[]作为画布上的坐标，它将在（x，y）对上绘制一个脉动环 类似于： 我真的不想把div放在画布上，所以我希望有一个更好的解决方案 提前感谢。您可以使用缓解功能“脉冲”高光戒指 以下是一个示例和演示： #画布{边框：1px纯红；} $（函数（）{ //画布相关变量 var canvas=document.getElementById（“canvas”）； var ctx=canvas.getContext（“2d”）； var$canvas=$（“#canvas”

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

类似于：

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

提前感谢。

您可以使用缓解功能“脉冲”高光戒指

以下是一个示例和演示：


#画布{边框：1px纯红；}
$（函数（）{
//画布相关变量
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（）；
//设置上下文样式
ctx.线宽=1；
ctx.strokeStyle=“黄金”；
ctx.fillStyle=“#888”；
//用于绘制环并设置环动画的变量
var PI2=数学PI*2；
var ringX，ringY，ringRadius，ingCounter，ringCounterVelocity；
//用背景色填充画布
ctx.fillRect（0,0，canvas.width，canvas.height）；
//告诉handleMouseDown处理所有mousedown事件
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
//设置环变量并启动动画
功能环（x，y）{
环x=x；
环形=y；
环半径=0；
响铃计数器=0；
环对速度=4；
请求动画帧（动画）；
}
//动画循环
函数animate（）{
//如果动画完成，则返回
如果（响铃计数器>200）{return；}
//否则，请求另一个动画循环
请求动画帧（动画）；
//ringCounter=100表示环正在收缩

if（ringcounter）是否有方法使动画连续并绘制多个环（带动画）…最后，如果画布上有一个图像，并且正在绘制圆环并设置动画，这会降低性能吗？Thanks Continuous：在达到200时将ringCounter设置回零。多个圆环：当然，只需绘制具有不同半径的多个圆弧。性能：取决于画布上需要重新绘制的其他内容。圆弧是主要的圆弧hape for canvas因此在那里的性能不是很好。干杯！感谢Mark我真的很感谢您的帮助。我按照您的建议进行了更改，但遇到了一个问题。在将ringcounter设置回0以启用循环时，一旦您单击画布上的第二个位置，圆圈的速度就会增加。我的意思是：（单击两个位置）如果要启动其他环，必须取消第一个环的动画：

.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;}
}



<!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>