diff --git a/certificate.html b/certificate.html index 79c20e8..4448aaf 100644 --- a/certificate.html +++ b/certificate.html @@ -774,6 +774,9 @@ // 初始化主画布 canvas = document.getElementById('signatureCanvas'); if (canvas) { + // 确保画布的实际尺寸与显示尺寸一致 + resizeCanvas(canvas); + ctx = canvas.getContext('2d'); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; @@ -786,6 +789,12 @@ // 初始化弹窗画布 initModalSignatureCanvas(); + + // 监听窗口大小变化,重新调整画布尺寸 + window.addEventListener('resize', function() { + if (canvas) resizeCanvas(canvas); + if (modalCanvas) resizeCanvas(modalCanvas); + }); } // 初始化弹窗签名画布 @@ -793,6 +802,9 @@ modalCanvas = document.getElementById('signatureModalCanvas'); if (!modalCanvas) return; + // 确保画布的实际尺寸与显示尺寸一致 + resizeCanvas(modalCanvas); + modalCtx = modalCanvas.getContext('2d'); modalCtx.strokeStyle = '#000'; modalCtx.lineWidth = 3; // 弹窗中使用更粗的线条 @@ -814,15 +826,25 @@ modalCanvas.addEventListener('touchend', stopModalDrawing); } + // 调整画布尺寸,确保实际尺寸与显示尺寸一致 + function resizeCanvas(canvas) { + const rect = canvas.getBoundingClientRect(); + canvas.width = rect.width; + canvas.height = rect.height; + } + // 打开签名弹窗 function openSignatureModal() { const modal = document.getElementById('signatureModal'); if (modal) { modal.classList.add('show'); - // 清除弹窗画布 - clearModalSignature(); - // 添加点击外部区域关闭弹窗的事件 + // 等待弹窗完全显示后调整画布尺寸 setTimeout(() => { + if (modalCanvas) { + resizeCanvas(modalCanvas); + clearModalSignature(); + } + // 添加点击外部区域关闭弹窗的事件 modal.addEventListener('click', handleModalClick); }, 100); }