如何让 JavaScript 画布覆盖整个屏幕？

Question

(function() {  // Creates a new canvas element and appends it as a child  // to the parent element, and returns the reference to  // the newly created canvas element  function createCanvas(parent, width, height) {    var canvas = {};    canvas.node = document.createElement('canvas');    canvas.context = canvas.node.getContext('2d');    canvas.node.width = width || 100;    canvas.node.height = height || 100;    parent.appendChild(canvas.node);    return canvas;  }  function init(container, width, height, fillColor) {    var canvas = createCanvas(container, width, height);    var ctx = canvas.context;    // define a custom fillCircle method    ctx.fillCircle = function(x, y, radius, fillColor) {      this.fillStyle = fillColor;      this.beginPath();      this.moveTo(x, y);      this.arc(x, y, radius, 0, Math.PI * 2, false);      this.fill();    };    ctx.clearTo = function(fillColor) {      ctx.fillStyle = fillColor;      ctx.fillRect(0, 0, width, height);    };    ctx.clearTo(fillColor || "black");    // bind mouse events    canvas.node.onmousemove = function(e) {      if (!canvas.isDrawing) {        return;      }      var x = e.pageX - this.offsetLeft;      var y = e.pageY - this.offsetTop;      var radius = 40; // or whatever      var fillColor = '#ff0000';      ctx.globalCompositeOperation = 'destination-out';      ctx.fillCircle(x, y, radius, fillColor);    };    canvas.node.onmousedown = function(e) {      canvas.isDrawing = false;    };    canvas.node.onmouseup = function(e) {      canvas.isDrawing = true;    };  }  var container = document.getElementById('canvas');  init(container, 531, 438, 'black');})();#canvas {  /* background:url(); */  width: 100vw;  height: 100vh;  background-color: rgb(224, 255, 226);}<div id="canvas"></div>我刚开始接触编码，我试图让 JavaScript 覆盖整个 rgb(224, 255, 226) - 那种薄荷色。所以基本上我想把整个事情都拿回来。请帮助并提前感谢您的帮助:)这是我在网上找到的代码，我试图找到制作它的人问他们但他们没有回复

Answer 1

当您调用 时init()，不是传递宽度和高度的静态值，而是传递窗口的大小。

(function() {

  // Creates a new canvas element and appends it as a child

  // to the parent element, and returns the reference to

  // the newly created canvas element

  function createCanvas(parent, width, height) {

    var canvas = {};

    canvas.node = document.createElement('canvas');

    canvas.context = canvas.node.getContext('2d');

    canvas.node.width = width || 100;

    canvas.node.height = height || 100;

    parent.appendChild(canvas.node);

    return canvas;

  }

  function init(container, width, height, fillColor) {

    var canvas = createCanvas(container, width, height);

    var ctx = canvas.context;

    // define a custom fillCircle method

    ctx.fillCircle = function(x, y, radius, fillColor) {

      this.fillStyle = fillColor;

      this.beginPath();

      this.moveTo(x, y);

      this.arc(x, y, radius, 0, Math.PI * 2, false);

      this.fill();

    };

    ctx.clearTo = function(fillColor) {

      ctx.fillStyle = fillColor;

      ctx.fillRect(0, 0, width, height);

    };

    ctx.clearTo(fillColor || "black");

    // bind mouse events

    canvas.node.onmousemove = function(e) {

      if (!canvas.isDrawing) {

        return;

      }

      var x = e.pageX - this.offsetLeft;

      var y = e.pageY - this.offsetTop;

      var radius = 40; // or whatever

      var fillColor = '#ff0000';

      ctx.globalCompositeOperation = 'destination-out';

      ctx.fillCircle(x, y, radius, fillColor);

    };

    canvas.node.onmousedown = function(e) {

      canvas.isDrawing = false;

    };

    canvas.node.onmouseup = function(e) {

      canvas.isDrawing = true;

    };

  }

  var container = document.getElementById('canvas');

  

  // Instead of passing static values for width and height,

  // pass the size of the window.

  init(container, window.innerWidth, window.innerHeight, 'black');

})();

#canvas {

  /* background:url(); */

  width: 100vw;

  height: 100vh;

  background-color: rgb(224, 255, 226);

}

<div id="canvas" height="50" width="50"></div>

Answer 2

您需要将 window.innerWidth 和 window.innerHeight 作为参数传递给 init 函数。

(function() {

  // Creates a new canvas element and appends it as a child

  // to the parent element, and returns the reference to

  // the newly created canvas element

  function createCanvas(parent, width, height) {

    var canvas = {};

    canvas.node = document.createElement('canvas');

    canvas.context = canvas.node.getContext('2d');

    canvas.node.width = width || 100;

    canvas.node.height = height || 100;

    parent.appendChild(canvas.node);

    return canvas;

  }

  function init(container, width, height, fillColor) {

    var canvas = createCanvas(container, width, height);

    var ctx = canvas.context;

    // define a custom fillCircle method

    ctx.fillCircle = function(x, y, radius, fillColor) {

      this.fillStyle = fillColor;

      this.beginPath();

      this.moveTo(x, y);

      this.arc(x, y, radius, 0, Math.PI * 2, false);

      this.fill();

    };

    ctx.clearTo = function(fillColor) {

      ctx.fillStyle = fillColor;

      ctx.fillRect(0, 0, width, height);

    };

    ctx.clearTo(fillColor || "black");

    // bind mouse events

    canvas.node.onmousemove = function(e) {

      if (!canvas.isDrawing) {

        return;

      }

      var x = e.pageX - this.offsetLeft;

      var y = e.pageY - this.offsetTop;

      var radius = 40; // or whatever

      var fillColor = '#ff0000';

      ctx.globalCompositeOperation = 'destination-out';

      ctx.fillCircle(x, y, radius, fillColor);

    };

    canvas.node.onmousedown = function(e) {

      canvas.isDrawing = false;

    };

    canvas.node.onmouseup = function(e) {

      canvas.isDrawing = true;

    };

  }

  var container = document.getElementById('canvas');

  init(container, window.innerWidth, window.innerHeight, 'black');

})();

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