使用javascript设置Canvas大小

Ker*_*rry 48 html javascript html5 canvas

我在html中有以下代码:

<canvas  id="myCanvas" width =800 height=800>
Run Code Online (Sandbox Code Playgroud)

我希望,而不是指定widthas 800,调用JavaScript函数getWidth() 来获取宽度,例如

 <canvas  id="myCanvas" width =getWidth() height=800>
Run Code Online (Sandbox Code Playgroud)

这样做的正确语法是什么?因为我正在做的事不起作用.

Luc*_* CR 51

您可以像这样设置宽度:

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

  • 绘制函数不是此代码的最佳位置.使用onresize没有问题. (6认同)

boz*_*doz 29

function setWidth(width) {
  var canvas = document.getElementById("myCanvas");  
  canvas.width = width;
}
Run Code Online (Sandbox Code Playgroud)

  • 在这里,宽度只能是一个数字,没有单位。正确:“ 100”,不正确:“ 100px” (2认同)

小智 7

试试这个:

var setCanvasSize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
Run Code Online (Sandbox Code Playgroud)