1
我想绘制使用HTML5画布元素的圆形组(如图1所示)。 enter image description hereHTML5画布响应不起作用
当我调整浏览器大小时,上图会被裁剪。 我希望它在我调整浏览器大小时能够响应。
请帮助我使它响应。谢谢。
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>
非常感谢你skaa – Trupti