設置畫布形狀大小的畫布

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>