計算 Canvas 文字最大字體

計算 Canvas 文字最大字體

好的，我將產生一個 HTML 頁面，其中包含一個 Canvas 元素和一個文字輸入框。當你在輸入框中輸入文字並點擊按鈕後，程式碼會自動計算出在指定的 Canvas 寬度內，該文字能夠完整顯示的最大字體大小，並將該字體大小的文字繪製在 Canvas 上。

<html>
<head>
<title>計算 Canvas 文字最大字體</title>
<style>
#myCanvas {
border: 1px solid black;
}
</style>
</head>
<body>

<div>
<label for="inputText">輸入文字:</label>
<input type="text" id="inputText" value="Hello">
</div>
<div>
<label for="canvasWidth">Canvas 寬度:</label>
<input type="number" id="canvasWidth" value="300">
</div>
<button id="calculateBtn">計算並繪製</button>
<canvas id="myCanvas" width="300" height="100"></canvas>

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const inputText = document.getElementById('inputText');
const calculateBtn = document.getElementById('calculateBtn');
const canvasWidthInput = document.getElementById('canvasWidth');

function calculateMaxFontSize(text, maxWidth) {
let fontSize = 10;
ctx.font = `${fontSize}px sans-serif`;
while (ctx.measureText(text).width < maxWidth) {
fontSize++;
ctx.font = `${fontSize}px sans-serif`;
}
return fontSize - 1;
}

function drawTextToCanvas(text, fontSize, canvasWidth, canvasHeight) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.font = `${fontSize}px sans-serif`;
ctx.fillStyle = 'black';
const textWidth = ctx.measureText(text).width;
const x = (canvasWidth - textWidth) / 2;
const y = canvasHeight / 2 + fontSize / 3; // 垂直居中
ctx.fillText(text, x, y);
}

calculateBtn.addEventListener('click', function() {
const text = inputText.value;
const canvasWidth = parseInt(canvasWidthInput.value);
canvas.width = canvasWidth;
const maxFontSize = calculateMaxFontSize(text, canvasWidth);
drawTextToCanvas(text, maxFontSize, canvasWidth, canvas.height);
});

// 初始繪製
const initialText = inputText.value;
const initialWidth = parseInt(canvasWidthInput.value);
const initialFontSize = calculateMaxFontSize(initialText, initialWidth);
drawTextToCanvas(initialText, initialFontSize, initialWidth, canvas.height);

</script>

</body>
</html>

留言