使用 javascript 設置畫布大小

Question

我在html中有以下代碼：

<canvas  id="myCanvas" width =800 height=800>

我不想將width指定為800 ，而是調用 JavaScript 函數getWidth()來獲取寬度，例如

 <canvas  id="myCanvas" width =getWidth() height=800>

正確的語法是什么？ 因為我正在做的事情不起作用。

Answer 1

您可以像這樣設置寬度：

function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

Answer 2

function setWidth(width) {
  var canvas = document.getElementById("myCanvas");  
  canvas.width = width;
}

Answer 3

嘗試這個：

var setCanvasSize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}

Answer 4

要設置畫布的寬度和高度，您可以使用畫布的寬度和高度對象屬性來設置寬度和高度。

HTML - 代碼

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

Javascript

const canvas = document.getElementById('canvas')
canvas.width = 300   // 300px
canvas.height = 200   //200px

 const canvas = document.getElementById('canvas') canvas.width = 350 canvas.height = 200

 #canvas { background-color:blue }

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

Answer 5

嘗試這個：

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
xS = w.innerWidth || e.clientWidth || g.clientWidth,
yS = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(xS + ' × ' + yS);

document.write('')

適用於 iframe 並且很好。

Answer 6

您也可以使用此腳本，只需更改高度和寬度

<canvas id="Canvas01" width="500" height="400" style="border:2px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas>

   <script>
      var canvas = document.getElementById("Canvas01");
      var ctx = canvas.getContext("2d");