如何使畫布中的內容具有響應性？

Question

嗨，我試圖從以下元標記中獲取值：

<meta name="viewport" property="viewport" content="width-device-width, initial-scale=1">

我發現使用js從meta標簽中獲取內容：

 function getVieuwContent() { var metas = document.getElementsByTagName('meta'); for (let i = 0; i < metas.length; i++) { if (metas[i].getAttribute("property") == "viewport") { return metas[i].getAttribute("content"); } } return ""; } console.log(getVieuwContent()); 

 <meta name="viewport" property="viewport" content="width-device-width, initial-scale=1"> 

我只是在控制台中獲得width-device-width, initial-scale=1 。 雖然我希望我能從中得到一些信息。 我想使畫布中的內容具有響應性，例如css從移動設備上的meta標簽響應。

我現在所擁有的：

• 全屏
  • window.innerWidth更改時自動更新畫布寬度
  • window.innerHeight更改時自動更新畫布高度
  • CSS { position: fixed; left: 0px; top: 0px; } { position: fixed; left: 0px; top: 0px; }
• 居中的矩形（需要響應的內容）

工作片段：

 function getId(id) { return document.getElementById(id); } const canvas = getId('canvas'); canvas.ctx = canvas.getContext("2d"); const requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimation; class Rectangle { constructor(x = 0, y = 0, w = 5, h = 5, color = '#0ff') { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } Update(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; } Draw(cvs) { let ctx = cvs.ctx; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect( //centers the width of the rectangle this.x - this.w / 2, //centers the height of the rectangle this.y - this.h / 2, this.w, this.h); ctx.stroke(); ctx.fill(); ctx.closePath(); } } let rect; function SetUp() { Start(); Update(); } function Start() { rect = new Rectangle(canvas.width / 2, canvas.height / 2, 100, 100) } function Update() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; rect.Update(canvas.width / 2, canvas.height / 2, 100, 100) rect.Draw(canvas); requestAnimationFrame(Update); } SetUp(); 

 #canvas { position: fixed; left: 0px; top: 0px; } 

 <canvas id='canvas'></canvas> 

Answer 1

嗨，我發現您應該對寬度和高度進行計算。

使內容在畫布中響應。
請參閱鏈接以獲取最終結果：

 function getId(id) { return document.getElementById(id); } const canvasA = getId('canvasA'); canvasA.ctx = canvasA.getContext("2d"); const canvasB = getId('canvasB'); canvasB.ctx = canvasB.getContext("2d"); const canvasC = getId('canvasC'); canvasC.ctx = canvasC.getContext("2d"); const requestAnimation = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimation; class Rectangle { constructor(x = 0, y = 0, w = 5, h = 5, color = '#0ff') { this.x = x; this.y = y; this.w = w; this.h = h; this.color = color; } Update(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; } Draw(cvs) { let ctx = cvs.ctx; ctx.beginPath(); ctx.fillStyle = this.color; ctx.fillRect( //centers the width of the rectangle this.x - this.w / 2, //centers the height of the rectangle this.y - this.h / 2, this.w, this.h); ctx.stroke(); ctx.fill(); ctx.closePath(); } } let rect, fragmentA, fragmentB, fragmentC; function SetUp() { Start(); Update(); } function Start() { rect = new Rectangle(50, 50, 100, 100); } function Update() { canvasA.width = window.innerWidth * 0.9; canvasA.height = 200; canvasB.width = window.innerWidth * 0.5; canvasB.height = 200; canvasC.width = window.innerWidth * 0.4; canvasC.height = 200; // Getting 1/10 of the width fragmentA = canvasA.width * 0.1; fragmentB = canvasB.width * 0.1; fragmentC = canvasC.width * 0.1; rect.Update(canvasA.width / 2, canvasA.height / 2, fragmentA * 2, fragmentA * 2) rect.Draw(canvasA); rect.Update(canvasB.width / 2, canvasB.height / 2, fragmentB * 2, fragmentB * 2) rect.Draw(canvasB); rect.Update(canvasC.width / 2, canvasC.height / 2, fragmentC * 2, fragmentC * 2) rect.Draw(canvasC); requestAnimationFrame(Update); } SetUp(); 

 canvas { margin: -4px -5px; border-style: solid; left: 0px; top: 0px; } 

 <canvas id='canvasA'></canvas> <canvas id='canvasB'></canvas> <canvas id='canvasC'></canvas>