Question

我在这里看到了几个问题，询问如何设置画布的大小相对于它所在的窗口：

Resize HTML5 canvas to fit window
Relatively sizing HTML Canvas

我想知道的是，我是否可以在画布内设置相对于大小的形状（即rect）。例如：

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

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

我尝试将rect设置为与画布大小相同的像素，认为它仍然相对于窗口但是没有这样做。
相反，如果我设置canvasContext.fillRect(0, 0, 100, 30);，它将相对于画布。

修改

在这里实现了我的错误和愚蠢。当我尝试将矩形的width设置为画布宽度时，我使用的是canvas.style.width而不是＆＃39; canvas.width`。我好像忘记了基本的HTML一秒......

Answer 1

是什么阻止您在绘图时简单地访问画布宽度？

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>

将画布形状大小设置为画布的百分比

1 个答案: