TextFormatUpdateEvent: getTextFormats()-Methode

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

getTextFormats()

<canvas id="editor-canvas"></canvas>

const TEXT_X = 10;
const TEXT_Y = 10;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;
editContext.addEventListener("textformatupdate", (e) => {
 // Clear the canvas.
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 // Render the text.
 ctx.fillText(editContext.text, TEXT_X, TEXT_Y);
 console.log(`Rendering text: ${editContext.text}`);
 // Get the text formats that the IME window wants to apply.
 const formats = e.getTextFormats();
 // Iterate over the text formats
 for (const format of formats) {
 const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
 console.log(
 `Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`,
 );
 const underlineXStart = ctx.measureText(
 editContext.text.substring(0, rangeStart),
 ).width;
 const underlineXEnd = ctx.measureText(
 editContext.text.substring(0, rangeEnd),
 ).width;
 const underlineY = TEXT_Y + 3;
 // For brevity, this example only draws a simple underline.
 // Use underlineStyle and underlineThickness to draw the correct underline.
 ctx.beginPath();
 ctx.moveTo(TEXT_X + underlineXStart, underlineY);
 ctx.lineTo(TEXT_X + underlineXEnd, underlineY);
 ctx.stroke();
 }
});

Help improve MDN