使用 javascript 设置画布大小答案

【问题标题】：Set Canvas size using javascript使用 javascript 设置画布大小
【发布时间】：2012-03-04 07:42:36
【问题描述】：

我在 html 中有以下代码：

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

我不想将width 指定为800，而是调用JavaScript 函数getWidth() 来获取宽度，例如

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

正确的语法是什么？因为我正在做的事情不起作用。

【问题讨论】：

也许这有帮助：stackoverflow.com/questions/331052/…
您可以与此帖子相关联以获得“适合屏幕”stackoverflow.com/questions/1664785/…
您的意思是<canvas id="myCanvas" width="800" height="800"> 和<canvas id="myCanvas" width="getWidth()" height="800">。这是代码中的错字还是错误？
How to resize html canvas element?的可能重复

标签： javascript html canvas

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

试试这个：

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 并且很好。

【讨论】：

document.write('')

【解决方案3】：

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

【讨论】：

这里的宽度只能是一个数字，没有单位。正确：“100”，不正确：“100px”

【解决方案4】：

你也可以使用这个脚本，只是改变高度和宽度

<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");

【讨论】：

OP 显然已经走到了这一步。我想他/她想在 JS 代码中调整画布的大小。

【解决方案5】：

你可以这样设置宽度：

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

【讨论】：

Draw 函数不是此代码的最佳位置。使用 onresize 没有问题。