canvas-editor
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/word.png">
    <title>canvas 编辑文本</title>
</head>
<body>
    <div class="editor-tools">
        <div class="tool-btn-select">
            <select id="fontFamilySelect"></select>
        </div>
        <div class="tool-btn" onclick="setAddFontSize()">
            <img src="/src/assets/icons/font-add.svg" alt="">
        </div>
        <div class="tool-btn" onclick="setReduceFontSize()">
            <img src="/src/assets/icons/font-reduce.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-bold" onclick="setFontBold()">
            <img src="/src/assets/icons/font-bold.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-italic" onclick="setFontItalic()">
            <img src="/src/assets/icons/font-italic.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-underline" onclick="setFontUnderLine()">
            <img src="/src/assets/icons/font-underline.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-strikeout" onclick="setFontStrikeout()">
            <img src="/src/assets/icons/font-strikeout.svg" alt="">
        </div>
        <div class="tool-btn tool-font-color">
            <img src="/src/assets/icons/font-color.svg" alt="">
            <input type="color" oninput="setFontColor(event)" />
        </div>
        <div class="tool-btn tool-btn-align active" data-align="left" onclick="setAlign('left')">
            <img src="/src/assets/icons/align-left.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-align" data-align="center" onclick="setAlign('center')">
            <img src="/src/assets/icons/align-center.svg" alt="">
        </div>
        <div class="tool-btn tool-btn-align" data-align="right" onclick="setAlign('right')">
            <img src="/src/assets/icons/align-right.svg" alt="">
        </div>
    </div>
    <div class="canvas-editor" id="editor"></div>
    <script type="module" src="/src/main.ts"></script>
</body>
</html>