javascript - 第二次尝试创建画布并设置其宽度失败

Question

我创建了两个画布元素来绘制。它们都是具有不同 id 的标准元素。

我使用 javascript 选择第一个，获取上下文并为两者分配 100vw 的宽度。按预期工作。

我重复完全相同的代码来选择第二个画布，我从相同的画布 + 上下文选择器中得到一个“未定义”对象：

HTML：

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

JS：

<script>
// select fore and background canvases
var canvas = document.getElementById('canvas'); 
var canvasbg = document.getElementById('canvasbg'); // object found

// get canvas 2D context and set them correct size
var ctx = canvas.getContext('2d'); 
var ctxbg = canvasbg.getContext('2d'); // object found

resize();

function resize() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

  ctx.canvas.width = winWidth; // works perfectly
  ctx.canvas.height = winHeight; // works perfectly

  ctxbg.canvasbg.width = winWidth; // console error: cannot set widht of undefined....???
  ctxbg.canvasbg.height = winHeight;
}
</script>

不知道该怎么做。这应该是非常基本的。

问题可能出在哪里？

标签： javascriptcanvasselector

Answer 1

canvasinctx.canvas是CanvasRenderingContext2d.canvas属性，而不是您的变量var canvas。

因此，要从ctxbg上下文中访问它，您还需要通过以下方式访问它.canvas：

  ctxbg.canvas.width = winWidth;
  ctxbg.canvas.height = winHeight;