A capacidade de resposta da tela HTML5 não funciona
Estou tentando plotar o grupo de círculos usando o elemento de tela HTML5 (como mostrado na fig 1).insira a descrição da imagem aqui
A figura acima é cortada quando redimensiono o navegador. Quero que ele seja responsivo quando redimensionar o navegador.
Por favor, ajude-me a torná-lo responsivo. Obrigado.
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth; /// equal to window dimension
canvas.height = window.innerHeight;
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
drawClock();
function drawClock() {
drawCircle(ctx, radius);
}
function drawCircle(ctx, radius) {
var ang;
var num;
for (num = 1; num <= 40; num++) {
ang = num * Math.PI / 20;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.beginPath();
ctx.arc(0, 0, radius / 20, 0, 2 * Math.PI);
ctx.stroke();
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang);
}
}
#canvas {
display: block;
}
<canvas id="canvas"></canvas>