HTML5画布响应不起作用
问题描述:
我想绘制使用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>
答
如果我有这个问题,我做了这样:
<!DOCTYPE html>
<html>
<head>
<title>expExp.html</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<script>
var canvas;var ctx;
function fnOL()
{
canvas = document.getElementById("canvas");
\t ctx = canvas.getContext("2d");
\t fnOR();
}
function drawClock() {
var radius;
\t radius = canvas.height/2;
ctx.translate(radius, radius);
radius = radius * 0.9;
drawCircle(ctx, radius);
}
function drawCircle(ctx, radius) {
var ang;
\t var num;
\t 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);
}
}
function fnOR()
{
canvas.width = window.innerWidth; /// equal to window dimension
canvas.height = window.innerHeight;
drawClock();
}
</script>
</head>
<body onload='fnOL();' onresize="fnOR();">
<canvas id='canvas'>No Canvas</canvas><br/>
</body>
</html>
答
的宽度和高度获得,当你初始化你的canvas元素集,所以您需要听取窗口大小调整事件并重置您的画布宽度和高度。
window.onresize = function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
非常感谢你skaa – Trupti