javascript - 将 Canvas 形状大小设置为 Canvas 的百分比

Question

我在这里看到了几个问题，询问如何设置 Canvas 相对于其所在窗口的大小:

1. Resize HTML5 canvas to fit window
2. Relatively sizing HTML Canvas

我想知道的是我是否可以在 Canvas 内相对于尺寸设置形状(即 rect )。例如:

canvas.style.width = 100;
canvas.style.height = 30;

canvasContext.fillRect(0, 0, "100%", "80%");

我尝试设置 rect以与 Canvas 大小相同的像素为单位，认为它仍然相对于窗口，但结果并非如此。
相反，如果我设置 canvasContext.fillRect(0, 0, 100, 30); ，它将相对于 Canvas 。

编辑:

在这里我认识到了自己的错误和愚蠢。当尝试设置width时矩形与 Canvas 宽度的关系，我使用 canvas.style.width而不是“canvas.width”。我似乎暂时忘记了基本的 HTML...

Answer 1

是什么阻止您在绘制时简单地访问 Canvas 宽度？

var canvas = document.getElementById("canvas");
var canvasContext = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 30;


function draw(color) {
  canvasContext.clearRect(0, 0, canvas.width, canvas.heigh);
  canvasContext.fillStyle = color;
  canvasContext.fillRect(0, 0, canvas.width, canvas.height * 0.5);
}
draw("#FF0000");

setTimeout(function() {
  canvas.height *= 2;
  draw("#00FF00");
}, 1000);

setTimeout(function() {
  canvas.height *= 2;
  draw("#0000FF");
}, 2000);

<canvas id="canvas" style="border: 1px solid black"></canvas>