如何將通過 javascript 創建的畫布居中到屏幕中心

Question

沒有帶有canvas id 的div，都是通過javascript 渲染的。 使用這種方法（這是從其他 codePens 中重用的代碼），我不確定如何將在視圖中創建的畫布居中。 它根據瀏覽器大小調整大小，但我需要根據整個 clientWidth 將圖像始終位於窗口的中心。 不知道如何在這段代碼中做到這一點。

 let img; const detail = 1; let particles = []; let particleImage; let ctx; function preload() { img = loadImage('https://uploads-ssl.webflow.com/60e7fc673c4aab21388ab7a6/60f1ddf63d26403634b61e99_daniel3.jpg'); } class Particle { constructor (x, y) { this.x = x || random(width); this.y = y || random(height); this.prevX = this.x; this.speed = 0; this.v = random(0, 0.7); } update (speed) { if (grid.length) { this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97; } this.x += (1 - this.speed) * 3 + this.v; if (this.x > width) { this.x = 0; } } draw () { image(particleImage, this.x, this.y); } } /* ====== STEP 6 ====== */ function goToStep6 () { ctx.globalAlpha = 1; loop(); image(img, 0, 0, width, height); loadPixels(); clear(); noStroke(); grid = []; for (let y = 0; y < height; y+=detail) { let row = []; for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = brightness(_color) / 100; row.push(_brightness); } grid.push(row); } particles = []; for (let i = 0; i < 3000; i++) { particles.push(new Particle(null, (i/3000) * height)); } } function step6 () { ctx.globalAlpha = 0.05; fill(31,36,67); rect(0,0,width,height); ctx.globalAlpha = 0.2; particles.forEach(p => { p.update(); ctx.globalAlpha = p.speed * 0.3; p.draw(); }); } function setup () { const canvas = createCanvas(100,100); ctx = canvas.drawingContext; pixelDensity(1); particleImage = createGraphics(8, 8); particleImage.fill(255); particleImage.noStroke(); particleImage.circle(4, 4, 4); windowResized(); if (window['goToStep' + 6]) { window['goToStep' + 6](); } draw(); } function windowResized () { let imgWidthNew = img.clientWidth; const imgRatio = img.width/img.height; if (windowWidth/windowHeight > imgRatio) { resizeCanvas(floor(windowHeight * 4,5), floor(windowHeight)); ctx.fillRect(100,100,canvas.width,canvas.height); } else { resizeCanvas(floor(windowHeight * 4,5), floor(windowHeight)); } noiseSeed(random(100)); if (window['goToStep' + 6]) { window['goToStep' + 6](); } draw(); } function draw () { window['step' + 6](); }

 body { margin: 0; overflow: hidden; background:rgba(31,36,67,1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

以及訪問 Codepen https://codepen.io/kubographics/pen/abWdeLo

Answer 1

我理解正確，您想要的是使用“覆蓋”對象適合值繪制此圖像。
也可以在其上設置這樣一個object-fit CSS 屬性，但這意味着您將繪制許多永遠看不到的像素。

因此，您可能更喜歡將畫布大小設置為窗口的大小，並操縱對image()的調用以使其適合。
曾經是 SO 用戶的 Ken Fyrstenberg（又名epistemex ）已經在此 Q/A 中提供了執行此對象適合“覆蓋”的代碼，因此我在簡單地更改變量名稱后重用它，因此它們更多可讀。

在你的代碼的另一個明顯變化是在windowResized事件處理程序，現在只要求resizeCanvas與窗口的innerWidth和innerHeight。

 let img; const detail = 1; let particles = []; let particleImage; let ctx; function preload() { img = loadImage('https://uploads-ssl.webflow.com/60e7fc673c4aab21388ab7a6/60f1ddf63d26403634b61e99_daniel3.jpg'); } class Particle { constructor (x, y) { this.x = x || random(width); this.y = y || random(height); this.prevX = this.x; this.speed = 0; this.v = random(0, 0.7); } update (speed) { if (grid.length) { this.speed = grid[floor(this.y / detail)][floor(this.x / detail)] * 0.97; } this.x += (1 - this.speed) * 3 + this.v; if (this.x > width) { this.x = 0; } } draw () { image(particleImage, this.x, this.y); } } /* ====== STEP 6 ====== */ function goToStep6 () { ctx.globalAlpha = 1; loop(); const imgWidth = img.width, imgHeight = img.height, ratio = Math.min(width / imgWidth, height / imgHeight); let newWidth = imgWidth * ratio, // new prop. width newHeight = imgHeight * ratio, // new prop. height sourceX, sourceY, sourceWidth, sourceHeight, aspectRatio = 1; // decide which gap to fill if (newWidth < width) { aspectRatio = width / newWidth; } if (Math.abs(aspectRatio - 1) < 1e-14 && newHeight < height) { aspectRatio = height / newHeight; } newWidth *= aspectRatio; newHeight *= aspectRatio; // calc source rectangle sourceWidth = imgWidth / (newWidth / width); sourceHeight = imgHeight / (newHeight / height); sourceX = (imgWidth - sourceWidth) / 2; sourceY = (imgHeight - sourceHeight) / 2; // make sure source rectangle is valid if (sourceX < 0) sourceX = 0; if (sourceY < 0) sourceY = 0; if (sourceWidth > imgWidth) sourceWidth = imgWidth; if (sourceHeight > imgHeight) sourceHeight = imgHeight; // of course P5.js inverted the parameters... image(img, 0, 0, width, height, sourceX, sourceY, sourceWidth, sourceHeight); loadPixels(); clear(); noStroke(); grid = []; for (let y = 0; y < height; y+=detail) { let row = []; for (let x = 0; x < width; x+=detail) { const r = pixels[(y * width + x) * 4]; const g = pixels[(y * width + x) * 4 + 1]; const b = pixels[(y * width + x) * 4 + 2]; const _color = color(r, g, b); const _brightness = brightness(_color) / 100; row.push(_brightness); } grid.push(row); } particles = []; for (let i = 0; i < 3000; i++) { particles.push(new Particle(null, (i/3000) * height)); } } function step6 () { ctx.globalAlpha = 0.05; fill(31,36,67); rect(0,0,width,height); ctx.globalAlpha = 0.2; particles.forEach(p => { p.update(); ctx.globalAlpha = p.speed * 0.3; p.draw(); }); } function setup () { const canvas = createCanvas(100,100); ctx = canvas.drawingContext; pixelDensity(1); particleImage = createGraphics(8, 8); particleImage.fill(255); particleImage.noStroke(); particleImage.circle(4, 4, 4); windowResized(); if (window['goToStep' + 6]) { window['goToStep' + 6](); } draw(); goToStep6(); } function windowResized () { resizeCanvas(window.innerWidth, window.innerHeight); noiseSeed(random(100)); goToStep6(); draw(); } function draw () { step6(); }

 body { margin: 0; overflow: hidden; background:rgba(31,36,67,1); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>