javascript - 如何使我的 Canvas 100% 宽度

Question

我正在努力尝试将 Canvas 宽度设置为 100% 宽度。它目前在 px 中定义。

宽度由 var width = 4000 定义。

但是将其更改为 100% 不起作用。 (可变宽度 = 100%)

  var VELOCITY = 0.1;
  var PARTICLES = 600;

  var mouse = {x:0, y:0};
  var particles = [];
  var colors = [ "blue","white","yellow" ];
  var canvas = document.getElementById('projector');
  var context;
  var width = 4000;
  var height = 750;

  if (canvas && canvas.getContext) {
    context = canvas.getContext('2d');

    for( var i = 0; i < PARTICLES; i++ ) {
      particles.push( { 
        x: Math.random()*width, 
        y: Math.random()*height, 
        vx: ((Math.random()*(VELOCITY*2))-VELOCITY),
        vy: ((Math.random()*(VELOCITY*2))-VELOCITY),
        size: 1+Math.random()*3,
        color: colors[ Math.floor( Math.random() * colors.length ) ]
      } );
    }

    Initialize();
  }

  function Initialize() {
    canvas.addEventListener('mousemove', MouseMove, false);
    window.addEventListener('mousedown', MouseDown, false);
    window.addEventListener('resize', ResizeCanvas, false);
    setInterval( TimeUpdate, 40 );

    ResizeCanvas();
  }

  function TimeUpdate(e) {

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

    var len = particles.length;
    var particle;

    for( var i = 0; i < len; i++ ) {
      particle = particles[i];

      if (!particle.frozen) {
        particle.x += particle.vx;
        particle.y += particle.vy;

        if (particle.x > width) {
          particle.vx = -VELOCITY - Math.random();
        }
        else if (particle.x < 0) {
          particle.vx = VELOCITY + Math.random();
        }
        else {
          particle.vx *= 1 + (Math.random() * 0.005);
        }

        if (particle.y > height) {
          particle.vy = -VELOCITY - Math.random();
        }
        else if (particle.y < 0) {
          particle.vy = VELOCITY + Math.random();
        }
        else {
          particle.vy *= 1 + (Math.random() * 0.005);
        }

        var distanceFactor = DistanceBetween( mouse, particle );
        distanceFactor = Math.max( Math.min( 15 - ( distanceFactor / 10 ), 10 ), 1 );

        particle.currentSize = particle.size*distanceFactor;
      }

      context.fillStyle = particle.color;
      context.beginPath();
      context.arc(particle.x,particle.y,particle.currentSize,0,Math.PI*2,true);
      context.closePath();
      context.fill();

    }
  }

  function MouseMove(e) {
    mouse.x = e.layerX;
    mouse.y = e.layerY;
  }

  function MouseDown(e) {
    var len = particles.length;

    var closestIndex = 0;
    var closestDistance = 1000;

    for( var i = 0; i < len; i++ ) {
      var thisDistance = DistanceBetween( particles[i], mouse );

      if( thisDistance < closestDistance ) {
        closestDistance = thisDistance;
        closestIndex = i;
      }

    }

    if (closestDistance < particles[closestIndex].currentSize) {
      particles[closestIndex].frozen = true;
    }
  }

  function ResizeCanvas(e) {
    canvas.width = width;
    canvas.height = height;
  }

  function DistanceBetween(p1,p2) {
    var dx = p2.x-p1.x;
    var dy = p2.y-p1.y;
    return Math.sqrt(dx*dx + dy*dy);
  }
</script>

Answer 1

您可以将 Canvas 设置为窗口宽度的 100%。

使用

var canvas = document.getElementById('projector');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;