function drawCircle() { context.translate(0, 0); context.lineWidth = 7; context.strokeStyle = FXQ.baseConf.color; context.beginPath(); context.arc(width, height, 130, 0, Math.PI * 2); context.stroke(); context.save(); // draw5Start(); var data = canvas.toDataURL("image/jpeg"); // 设置随机绘制线条的数量和样式 const numLines = getRandomInt(3, 6); // 随机线条的数量 let radius = 150 const centerX = canvas.width / 2; const centerY = canvas.height / 2; for (let i = 0; i < numLines; i++) { // 生成随机的起点角度和长度 const startAngle = Math.random() * 2 * Math.PI; const lineLength = Math.random() * radius * 0.8 + radius * 0.1; // 计算线条的起点和终点坐标 const startX = centerX + lineLength * Math.cos(startAngle); const startY = centerY + lineLength * Math.sin(startAngle); const endX = centerX + radius * Math.cos(startAngle); const endY = centerY + radius * Math.tan(startAngle); // 绘制线条 context.beginPath(); context.moveTo(startX, startY); context.lineTo(endX, endY); // context.strokeStyle = "rgba(255,255,255,1)"; context.strokeStyle = "#fff"; context.lineWidth = 2; context.stroke(); console.log('防伪调用'); } // 生成指定范围内的随机整数 function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // console.log(data); } function draw5Start() { context.save(); context.fillStyle = FXQ.baseConf.color; //移动坐标原点 中心点开始绘制 context.translate(width, height); console.log(width, height,'五角星大小'); //旋转 context.rotate(Math.PI); console.log(Math,'五角星的大小'); context.beginPath(); var dig = (Math.PI / 5) * 4; for (let i = 0; i < 5; i++) { let x = Math.sin(i * dig); let y = Math.cos(i * dig); context.lineTo(x * 30, y * 30); } context.closePath(); context.stroke(); context.fill(); context.restore(); } 为什么调用第一个函数的时候 会导致第二个函数绘制的五角星变小?

调用第一个函数时，你使用了 `context.translate(0, 0);` 将画布的原点移动到了左上角，然后在 `draw5Start()` 函数中又将原点移回了画布的中心点 `context.translate(width, height);`。这样会导致第二个函数绘制的五角星的位置发生了偏移，因为它是相对于画布中心点进行绘制的。

另外，你在调用 `draw5Start()` 函数之前旋转了画布 `context.rotate(Math.PI);`，这会导致绘制的五角星被翻转了180度。这可能也是导致五角星看起来变小的原因之一。

如果你希望第二个函数绘制的五角星大小保持一致，你可以将 `context.translate(width, height);` 和 `context.rotate(Math.PI);` 这两行代码从 `draw5Start()` 函数中移除，并且将它们放在 `drawCircle()` 函数中调用 `draw5Start()` 之前执行，这样可以确保五角星相对于画布中心点进行绘制，并且不会被翻转。