Question

请查看此代码：

    (function() {
        var cnv = document.getElementById('canvas');
        if (cnv.getContext) {
          var ctx = cnv.getContext('2d');
        } else {
          alert('God Damn it ...');
        }

        function initialize() {
            window.addEventListener('resize', resizeCanvas, false);
            resizeCanvas();
        }

        function draw() {
            for (var i = 0; i < 25; i++) {

            width = Math.random() * cnv.width;
            height = Math.random() * cnv.height;

            ctx.beginPath();
            ctx.arc(width, height, 15, 0, Math.PI * 2);
            ctx.strokeStyle = '#E1E1E1';
            ctx.lineWidth = 1;

            ctx.stroke();
          }
        }

        function resizeCanvas() {
            cnv.width = window.innerWidth;
            cnv.height = window.innerHeight;
            draw();
        }

        initialize();

    })();

我创建了25个随机位置的Circle形状，我想创建一个在间隔时间内向上或向下缩放的动画。我知道setInterval但是我应该怎样称呼我的形状呢？

Answer 1

您要做的第一件事就是设置一个存储圈子位置的地方，因为它们都是相同的半径，我们只能存储x和y位置。为此，我们可以创建一个Circle函数（＆＃34; class＆＃34; ）并拥有一个圆圈阵列：

  var circles = [];      // Array to store our circles
  var minRadius = 1;     // The smallest radius we can hit
  var maxRadius = 100;   // The largest radius we can hit
  var currentRadius = 15;// The current radius of all our circles
  var scaleBy = 1;       // How the radius changes  
  var cnv = document.getElementById('canvas');
  // ...

  function initialize() {
    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();  
    // Populating the array of circles to use when drawing
    for (var i = 0; i < 25; i++) { // Make sure to do this after re-sizing the canvas
      width = Math.random() * cnv.width;
      height = Math.random() * cnv.height;
      circles.push(new Circle(width, height));
    }
  }
  // ...
  function Circle(x, y){
    this.x = x;
    this.y = y;
  }

  Circle.prototype.draw = function(){
      ctx.beginPath();
      ctx.arc(this.x, this.y, currentRadius, 0, Math.PI * 2);
      ctx.strokeStyle = '#E1E1E1';
      ctx.lineWidth = 5;
      ctx.stroke();
  }

现在您在拨打draw时有一些圈子，您可以遍历数组并为数组中的每个圈子元素调用circle.draw()：

  function draw() {
    // Clear the screen and draw the circles in our array
    ctx.clearRect(0,0, cnv.width, cnv.height);
    for (var i = 0; i < circles.length; i++) {
      circles[i].draw();
    }
  }

需要注意的一点是，您需要在绘图前使用ctx.clearRect(0,0, cnv.width, cnv.height)清除屏幕。

最后，您现在可以使用setInterval来更改currentRadius（*虽然setInterval没有任何问题我建议您使用window.requestAnimationFrame来制作动画。＃39;更平滑有效的方法）。然后，当您致电draw时，它将使用新值currentRadius绘制圆圈。在这个例子中，我将从15开始。然后增加1直到它达到maxRadius，然后我们可以翻转scaleBy的符号以开始减小半径以使它们变小。最后，当我们minRadius时，你可以再次翻转scaleBy的标志，让它再次开始放大：

  var timer = setInterval( function(){
    // If we hit our min or max start scaling in the other direction
    if(currentRadius > maxRadius || currentRadius < minRadius){
      scaleBy *= -1;
    }
    currentRadius += scaleBy;
    draw();
  }, 50);

以下是完整程序的代码片段：

＆＃13;

(function() {
  var circles = [];
  var minRadius = 1;
  var maxRadius = 100;
  var currentRadius = 15;
  var scaleBy = 1;
  var cnv = document.getElementById('canvas');
  if (cnv.getContext) {
    var ctx = cnv.getContext('2d');
  } else {
    alert('God Damn it ...');
  }

  function initialize() {
    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();  
    for (var i = 0; i < 25; i++) {
      width = Math.random() * cnv.width;
      height = Math.random() * cnv.height;
      circles.push(new Circle(width, height));
    }
  }

  function draw() {
    ctx.clearRect(0,0, cnv.width, cnv.height);
    for (var i = 0; i < circles.length; i++) {
	  circles[i].draw();
    }
  }

  function resizeCanvas() {
    cnv.width = window.innerWidth;
    cnv.height = window.innerHeight;
  }
  
  function Circle(x, y){
  	this.x = x;
    this.y = y;
  }
  
  Circle.prototype.draw = function(){
      ctx.beginPath();
      ctx.arc(this.x, this.y, currentRadius, 0, Math.PI * 2);
   	  ctx.strokeStyle = '#E1E1E1';
      ctx.lineWidth = 5;
      ctx.stroke();
  }

  initialize();
  var timer = setInterval( function(){
  	if(currentRadius > maxRadius || currentRadius < minRadius){
      scaleBy *= -1;
    }
    currentRadius += scaleBy;
    draw();
  }, 50);

})();

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

如何缩放Canvas形状？

1 个答案: