我的代码有问题，我试图用画布画一个重复的图案，但它一直切断一块。有人知道是否有可能计算画布所需的尺寸吗?
我使用以下代码生成画布:
const beginLength = 600;
const minLength = 1;
var alpha = 90;
var beta = -90;
const ratioA = 0.7;
const ratioB = 0.7;
const Point = function(x, y) {
this.X = x;
this.Y = y;
};
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
canvas.width = window.innerWidth * 1;
canvas.height = window.innerHeight * 1;
const drawLine = function(rootPoint, r, theta) {
context.beginPath();
const endX = rootPoint.X + r * Math.cos(theta);
const endY = rootPoint.Y + r * Math.sin(theta);
const endPoint = new Point(endX, endY);
context.moveTo(rootPoint.X, rootPoint.Y);
context.lineTo(endPoint.X, endPoint.Y);
context.strokeStyle = generateColor();
context.stroke();
if (r * ratioA < minLength || r * ratioB < minLength) {
return;
} else {
drawLine(endPoint, r * ratioA, theta + alpha);
drawLine(endPoint, r * ratioB, theta + beta);
}
};
function generateColor() {
return "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")";
}
beta = beta / 180 * Math.PI;
alpha = alpha / 180 * Math.PI;
drawLine(new Point(canvas.width / 2, canvas.height), beginLength, Math.PI * 1.5);<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" type="image/x-icon" href="svg/draw.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Hubballi&family=Oxygen:wght@300&family=Roboto+Mono:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<canvas id="canvas" style="image-rendering: pixelated;"></canvas>
</body>
</html>我认为你的问题是，你试图画的东西的位置是在定义画布之外，因为它似乎是切断它。由于您已经将画布尺寸定义为等于窗口宽度和窗口高度，因此画布区域将根据窗口的大小调整而变化，如果您缩小，您可能能够看到整个画布内容。您可以通过设置一个包含max x值的变量来解决这个问题，并在每次更新该值时调整画布的大小，以便始终显示内容。一个更简单的解决方案是尝试将画布宽度设置为一个常量，您可以通过尝试和错误来估计和修改它。我不知道我是否完全理解你的问题，但我希望这有助于。(这是我的第一个stackoverflow答案:|)