[英]How do I make the JavaScript canvas cover the whole screen?
(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) - 那種薄荷色。 所以基本上我想把整個事情都拿回來。 請幫助並提前感謝您的幫助:)
這是我在 inte.net 上找到的代碼,我試圖找到制作它的人來問他們,但他們沒有回復
當您調用init()
時,不是傳遞 static 的寬度和高度值,而是傳遞 window 的大小。
(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>
您需要將 window.innerWidth 和 window.innerHeight 作為參數傳遞給 init function。
(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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.