设置画布形状大小的画布

Question

的百分比

我见过一对夫妇在这里的问题被问如何相对画布的大小设置为它在窗口：

1. Resize HTML5 canvas to fit window
2. 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而不是“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>