我正在尝试使用 HTML5 画布元素绘制一组圆圈（如图所示).
当我调整浏览器大小时，上图会被裁剪。我希望它在调整浏览器大小时能够响应。
请帮助我使其响应。谢谢。
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>
宽度和高度在初始化画布元素时设置，因此您需要监听窗口调整大小事件并重置画布宽度和高度。
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
