如何让 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() {&nbsp; // Creates a new canvas element and appends it as a child&nbsp; // to the parent element, and returns the reference to&nbsp; // the newly created canvas element&nbsp; function createCanvas(parent, width, height) {&nbsp; &nbsp; var canvas = {};&nbsp; &nbsp; canvas.node = document.createElement('canvas');&nbsp; &nbsp; canvas.context = canvas.node.getContext('2d');&nbsp; &nbsp; canvas.node.width = width || 100;&nbsp; &nbsp; canvas.node.height = height || 100;&nbsp; &nbsp; parent.appendChild(canvas.node);&nbsp; &nbsp; return canvas;&nbsp; }&nbsp; function init(container, width, height, fillColor) {&nbsp; &nbsp; var canvas = createCanvas(container, width, height);&nbsp; &nbsp; var ctx = canvas.context;&nbsp; &nbsp; // define a custom fillCircle method&nbsp; &nbsp; ctx.fillCircle = function(x, y, radius, fillColor) {&nbsp; &nbsp; &nbsp; this.fillStyle = fillColor;&nbsp; &nbsp; &nbsp; this.beginPath();&nbsp; &nbsp; &nbsp; this.moveTo(x, y);&nbsp; &nbsp; &nbsp; this.arc(x, y, radius, 0, Math.PI * 2, false);&nbsp; &nbsp; &nbsp; this.fill();&nbsp; &nbsp; };&nbsp; &nbsp; ctx.clearTo = function(fillColor) {&nbsp; &nbsp; &nbsp; ctx.fillStyle = fillColor;&nbsp; &nbsp; &nbsp; ctx.fillRect(0, 0, width, height);&nbsp; &nbsp; };&nbsp; &nbsp; ctx.clearTo(fillColor || "black");&nbsp; &nbsp; // bind mouse events&nbsp; &nbsp; canvas.node.onmousemove = function(e) {&nbsp; &nbsp; &nbsp; if (!canvas.isDrawing) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; var x = e.pageX - this.offsetLeft;&nbsp; &nbsp; &nbsp; var y = e.pageY - this.offsetTop;&nbsp; &nbsp; &nbsp; var radius = 40; // or whatever&nbsp; &nbsp; &nbsp; var fillColor = '#ff0000';&nbsp; &nbsp; &nbsp; ctx.globalCompositeOperation = 'destination-out';&nbsp; &nbsp; &nbsp; ctx.fillCircle(x, y, radius, fillColor);&nbsp; &nbsp; };&nbsp; &nbsp; canvas.node.onmousedown = function(e) {&nbsp; &nbsp; &nbsp; canvas.isDrawing = false;&nbsp; &nbsp; };&nbsp; &nbsp; canvas.node.onmouseup = function(e) {&nbsp; &nbsp; &nbsp; canvas.isDrawing = true;&nbsp; &nbsp; };&nbsp; }&nbsp; var container = document.getElementById('canvas');&nbsp;&nbsp;&nbsp; // Instead of passing static values for width and height,&nbsp; // pass the size of the window.&nbsp; init(container, window.innerWidth, window.innerHeight, 'black');})();#canvas {&nbsp; /* background:url(); */&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; background-color: rgb(224, 255, 226);}<div id="canvas" height="50" width="50"></div>

Answer 2

您需要将 window.innerWidth 和 window.innerHeight 作为参数传递给 init 函数。(function() {&nbsp; // Creates a new canvas element and appends it as a child&nbsp; // to the parent element, and returns the reference to&nbsp; // the newly created canvas element&nbsp; function createCanvas(parent, width, height) {&nbsp; &nbsp; var canvas = {};&nbsp; &nbsp; canvas.node = document.createElement('canvas');&nbsp; &nbsp; canvas.context = canvas.node.getContext('2d');&nbsp; &nbsp; canvas.node.width = width || 100;&nbsp; &nbsp; canvas.node.height = height || 100;&nbsp; &nbsp; parent.appendChild(canvas.node);&nbsp; &nbsp; return canvas;&nbsp; }&nbsp; function init(container, width, height, fillColor) {&nbsp; &nbsp; var canvas = createCanvas(container, width, height);&nbsp; &nbsp; var ctx = canvas.context;&nbsp; &nbsp; // define a custom fillCircle method&nbsp; &nbsp; ctx.fillCircle = function(x, y, radius, fillColor) {&nbsp; &nbsp; &nbsp; this.fillStyle = fillColor;&nbsp; &nbsp; &nbsp; this.beginPath();&nbsp; &nbsp; &nbsp; this.moveTo(x, y);&nbsp; &nbsp; &nbsp; this.arc(x, y, radius, 0, Math.PI * 2, false);&nbsp; &nbsp; &nbsp; this.fill();&nbsp; &nbsp; };&nbsp; &nbsp; ctx.clearTo = function(fillColor) {&nbsp; &nbsp; &nbsp; ctx.fillStyle = fillColor;&nbsp; &nbsp; &nbsp; ctx.fillRect(0, 0, width, height);&nbsp; &nbsp; };&nbsp; &nbsp; ctx.clearTo(fillColor || "black");&nbsp; &nbsp; // bind mouse events&nbsp; &nbsp; canvas.node.onmousemove = function(e) {&nbsp; &nbsp; &nbsp; if (!canvas.isDrawing) {&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; var x = e.pageX - this.offsetLeft;&nbsp; &nbsp; &nbsp; var y = e.pageY - this.offsetTop;&nbsp; &nbsp; &nbsp; var radius = 40; // or whatever&nbsp; &nbsp; &nbsp; var fillColor = '#ff0000';&nbsp; &nbsp; &nbsp; ctx.globalCompositeOperation = 'destination-out';&nbsp; &nbsp; &nbsp; ctx.fillCircle(x, y, radius, fillColor);&nbsp; &nbsp; };&nbsp; &nbsp; canvas.node.onmousedown = function(e) {&nbsp; &nbsp; &nbsp; canvas.isDrawing = false;&nbsp; &nbsp; };&nbsp; &nbsp; canvas.node.onmouseup = function(e) {&nbsp; &nbsp; &nbsp; canvas.isDrawing = true;&nbsp; &nbsp; };&nbsp; }&nbsp; var container = document.getElementById('canvas');&nbsp; init(container, window.innerWidth, window.innerHeight, 'black');})();<div id="canvas"></div>