如何在函数内对javascript执行慢脉冲循环？

我已经在javascript中绘制了一些圆形函数，并想在其中添加一个慢脉冲效果的函数。下面是我的js代码，有人能帮我吗

谢谢

卡伦x

   function newCircle1 (x,y){

            var ctx=canvas.getContext("2d");

            ctx.fillStyle="rgb(255,255,255,0.65)";
            ctx.beginPath();
            ctx.arc(x,y,10,0,2*Math.PI);
            ctx.fill();         
    }

            function newCircle2 (x,y){

            var ctx=canvas.getContext("2d");

            ctx.fillStyle="rgb(255,255,255)";
            ctx.beginPath();
            ctx.arc(x,y,5,0,2*Math.PI);
            ctx.fill();
        }


        function getMousePos(canvas,evt){

        var rect = canvas.getBoundingClientRect();
        return{

            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }

        canvas.addEventListener('mousemove', function(evt){
            var mousePos = getMousePos (canvas,evt);

            newCircle1(mousePos.x, mousePos.y);
            newCircle2(mousePos.x, mousePos.y);     

        }, false);
}

---

我的例子是基于markE的例子。这使半径和不透明度在两个最小点和最大点之间振荡。调整设置以与图形输出混淆：

var canvas = document.createElement( 'canvas' ),
    ctx = canvas.getContext( '2d' ),
    width = canvas.width = 300,
    height = canvas.height = 300,
    baseRadius = { min: 3, max: 18 },
    baseOpacity = { min: 0.3, max: 0.7 },
    mouse = { x: -9999, y: -9999 },
    tick = 0,
    osc1,
    osc2,
    bounds;

function onresize() {
  bounds = canvas.getBoundingClientRect();
}

function onmousemove( e ) {
  mouse.x = e.pageX - bounds.left;
  mouse.y = e.pageY - bounds.top;    
}

function loop() {
  requestAnimationFrame( loop );
  osc1 = 0.5 + Math.sin( tick / 13 ) * 0.5;
  osc2 = 0.5 + Math.sin( tick / 19 ) * 0.5;

  var radius = baseRadius.min + ( ( baseRadius.max - baseRadius.min ) * osc1 ),
      opacity = baseOpacity.min + ( ( baseOpacity.max - baseOpacity.min ) * osc1 );

  ctx.beginPath();
  ctx.arc( mouse.x, mouse.y, radius, 0, Math.PI * 2 );
  ctx.fillStyle = 'rgba(255, 255, 255, ' + opacity + ')';
  ctx.fill();

  tick++;
}

window.addEventListener( 'resize', onresize );
window.addEventListener( 'mousemove', onmousemove );

document.body.appendChild( canvas );
onresize();
loop();

---

那么你为每个圆创建了一个新的上下文？@Troy:afaik，每个画布只有一个2d上下文。反复调用canvas.getContext（“2d”）不会创建新的画布，但每次都会返回相同的画布。但是你是对的，

ctx

应该与

canvas

@Bergi和特洛伊在同一范围内：是的，每个canvas只有一个上下文。多次调用canvas.getContext每次都将获得相同的上下文；-）