画布中的脉冲动画

Question

我试图使各种形状在画布中具有类似效应的脉冲，并设法用圆圈进行

function drawCircle() {
// color in the background
context.fillStyle = "#EEEEEE";
context.fillRect(0, 0, canvas.width, canvas.height);
// draw the circle
context.beginPath();
var radius = 25 + 20 * Math.abs(Math.cos(angle)); //radius of circle
context.arc(25, 25, radius, 0, Math.PI * 2, false); //position on canvas
context.closePath();
// color in the circle
context.fillStyle = "#006699";
context.fill();
//'pulse'
angle += Math.PI / 220;
requestAnimationFrame(drawCircle);
}
drawCircle();

，但我不确定如何做任何其他形状。到目前为止，我的三角形是

function drawTriangle() {
// draw the triangle
context.beginPath();
context.moveTo(75, 50);
context.lineTo(100, 75);
context.lineTo(100, 25);
context.fill();
context.rect(215, 100, Math.PI * 2, false); //position on canvas
context.closePath();
// color in the triangle
context.fillStyle = "#3f007f";
context.fill();
//'pulse'
angle += Math.PI / 280;
requestAnimationFrame(drawTriangle);
}
drawTriangle();

任何见解都将不胜感激。

Answer 1

这可以通过更改上下文矩阵的比例来实现。

您需要找到的只是形状缩放锚的位置，因此您可以在应用刻度后将矩阵转换为正确的位置。

在以下示例中，我将使用形状的中心作为缩放锚，因为这似乎是您想要的。

矩阵转换的扩展版将是

ctx.translate(anchorX, anchorY);
ctx.scale(scaleFactor, scaleFactor);
ctx.translate(-anchorX, -anchorY);

在下面的示例中已减少为

ctx.setTransform(
   scale, 0, 0,
   scale, anchorX  - (anchorX * scale), anchorY  - (anchorY * scale)
);

var ctx = canvas.getContext('2d');
var angle = 0;
var scale = 1;
var img = new Image();
img.src = 'https://dl.dropboxusercontent.com/s/4e90e48s5vtmfbd/aaa.png';
anim();
function anim() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  updateScale();
  drawCircle();
  drawTriangle();
  drawImage();
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  requestAnimationFrame(anim);
}
function updateScale() {
  angle += Math.PI / 220;
  scale = 0.5 + Math.abs(Math.cos(angle));
}
function drawCircle() {
  ctx.beginPath();
  var cx = 75,
    cy = 50,
    radius = 25;
  // for the circle, centerX and centerY are given
  var anchorX = cx,
    anchorY = cy;
  // with these anchorX, anchorY and scale, 
  // we can determine where we need to translate our context once scaled
  var scaledX = anchorX - (anchorX * scale),
    scaledY = anchorY - (anchorY * scale);
  // then we apply the matrix in one go
  ctx.setTransform(scale, 0, 0, scale, scaledX, scaledY);
  // and we draw normally
  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
  ctx.fill();
}
function drawTriangle() {
  ctx.beginPath();
  // for the triangle, we need to find the position between minX and maxX,
  // and between minY and maxY
  var anchorX = 175 + (200 - 175) / 2,
    anchorY = 25 + (75 - 25) / 2;
  var scaledX = anchorX - (anchorX * scale),
    scaledY = anchorY - (anchorY * scale);
  ctx.setTransform(scale, 0, 0, scale, scaledX, scaledY);
  ctx.moveTo(175, 50);
  ctx.lineTo(200, 75);
  ctx.lineTo(200, 25);
  ctx.fill();
}
function drawImage() {
  if (!img.naturalWidth) return;
  // for rects, it's just pos + (length / 2)
  var anchorX = 250 + img.naturalWidth / 2,
    anchorY = 25 + img.naturalHeight / 2;
  var scaledX = anchorX - (anchorX * scale),
    scaledY = anchorY - (anchorY * scale);
  ctx.setTransform(scale, 0, 0, scale, scaledX, scaledY);
  ctx.drawImage(img, 250, 25);
}

<canvas id="canvas" width="500"></canvas>