如何在调整大小时调整 canvas 的大小？

Question

我正在使用这个插件：https://codepen.io/acauamontiel/pen/mJdnw

/*
 * requestAnimationFrame pollyfill
 */
if (!window.requestAnimationFrame) {
 window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
  return window.setTimeout(callback, 1000 / 60);
 });
}

/*!
 * Mantis.js / jQuery / Zepto.js plugin for Constellation
 * @version 1.2.2
 * @author Acauã Montiel <contato@acauamontiel.com.br>
 * @license http://acaua.mit-license.org/
 */
(function ($, window) {
 /**
  * Makes a nice constellation on canvas
  * @constructor Constellation
  */
 function Constellation (canvas, options) {
  var $canvas = $(canvas),
   context = canvas.getContext('2d'),
   defaults = {
    star: {
     color: 'rgba(255, 255, 255, .5)',
     width: 1,
     randomWidth: true
    },
    line: {
     color: 'rgba(255, 255, 255, .5)',
     width: 0.2
    },
    position: {
     x: 0, // This value will be overwritten at startup
     y: 0 // This value will be overwritten at startup
    },
    width: window.innerWidth,
    height: window.innerHeight,
    velocity: 0.1,
    length: 100,
    distance: 120,
    radius: 150,
    stars: []
   },
   config = $.extend(true, {}, defaults, options);

  function Star () {
   this.x = Math.random() * canvas.width;
   this.y = Math.random() * canvas.height;

   this.vx = (config.velocity - (Math.random() * 0.5));
   this.vy = (config.velocity - (Math.random() * 0.5));

   this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width;
  }

  Star.prototype = {
   create: function(){
    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.fill();
   },

   animate: function(){
    var i;
    for (i = 0; i < config.length; i++) {

     var star = config.stars[i];

     if (star.y < 0 || star.y > canvas.height) {
      star.vx = star.vx;
      star.vy = - star.vy;
     } else if (star.x < 0 || star.x > canvas.width) {
      star.vx = - star.vx;
      star.vy = star.vy;
     }

     star.x += star.vx;
     star.y += star.vy;
    }
   },

   line: function(){
    var length = config.length,
     iStar,
     jStar,
     i,
     j;

    for (i = 0; i < length; i++) {
     for (j = 0; j < length; j++) {
      iStar = config.stars[i];
      jStar = config.stars[j];

      if (
       (iStar.x - jStar.x) < config.distance &&
       (iStar.y - jStar.y) < config.distance &&
       (iStar.x - jStar.x) > - config.distance &&
       (iStar.y - jStar.y) > - config.distance
      ) {
       if (
        (iStar.x - config.position.x) < config.radius &&
        (iStar.y - config.position.y) < config.radius &&
        (iStar.x - config.position.x) > - config.radius &&
        (iStar.y - config.position.y) > - config.radius
       ) {
        context.beginPath();
        context.moveTo(iStar.x, iStar.y);
        context.lineTo(jStar.x, jStar.y);
        context.stroke();
        context.closePath();
       }
      }
     }
    }
   }
  };

  this.createStars = function () {
   var length = config.length,
    star,
    i;

   context.clearRect(0, 0, canvas.width, canvas.height);

   for (i = 0; i < length; i++) {
    config.stars.push(new Star());
    star = config.stars[i];

    star.create();
   }

   star.line();
   star.animate();
  };

  this.setCanvas = function () {
   canvas.width = config.width;
   canvas.height = config.height;
  };

  this.setContext = function () {
   context.fillStyle = config.star.color;
   context.strokeStyle = config.line.color;
   context.lineWidth = config.line.width;
  };

  this.setInitialPosition = function () {
   if (!options || !options.hasOwnProperty('position')) {
    config.position = {
     x: canvas.width * 0.5,
     y: canvas.height * 0.5
    };
   }
  };

  this.loop = function (callback) {
   callback();

   window.requestAnimationFrame(function () {
    stats.begin(); // Only for Stats
    this.loop(callback);
    stats.end(); // Only for Stats
   }.bind(this));
  };

  this.bind = function () {
   $canvas.on('mousemove', function(e){
    config.position.x = e.pageX - $canvas.offset().left;
    config.position.y = e.pageY - $canvas.offset().top;
   });
  };

  this.init = function () {
   this.setCanvas();
   this.setContext();
   this.setInitialPosition();
   this.loop(this.createStars);
   this.bind();
  };
 }

 $.fn.constellation = function (options) {
  return this.each(function () {
   var c = new Constellation(this, options);
   c.init();
  });
 };
})($, window);

// Init plugin
$('canvas').constellation({
 star: {
  width: 3
 },
 line: {
  color: 'rgba(255, 0, 0, .5)'
 },
 radius: 250
});

body {
  overflow: hidden;
  background: #111;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<canvas></canvas>

如您所见，当您调整屏幕大小时，canvas 保持原始宽度和高度，我想提供调整 window 大小的容量，并在保持全屏显示的插件。

Answer 1

第一

用一个函数包装你的插件初始化代码，就像这样...

function init_plugin() {
   $('canvas').constellation({
      star: {
         width: 3
      },
      line: {
         color: 'rgba(255, 0, 0, .5)'
      },
      radius: 250
   });
}
init_plugin(); //init plugin

第二

添加一个 window 调整大小事件处理程序并在其中执行所有必要的操作...

window.onresize = function() {
   cancelAnimationFrame(rAF); //cancel current animation frame
   $('canvas')[0].width = window.innerWidth; //reset canvas width
   $('canvas')[0].height = window.innerHeight; //reset canvas height
   init_plugin(); //init plugin
}

此外，您需要将 requestAnimationFrame() 分配给全局可访问变量 （此处为 rAF） ，以便您稍后可以取消它。

这里是working code on CodePen

^{抱歉没有给出那么多解释}

如何在调整大小时调整 canvas 的大小？

How to resize a canvas on resizing?

javascript

jquery

resize

canvas