汉字描红字帖拼音字帖网页在线生成

falali009

已于 2024-10-21 17:44:38 修改

阅读量278

点赞数 3

文章标签： javascript 前端 html

于 2024-10-21 17:39:41 首次发布

本文链接：https://blog.csdn.net/falali009/article/details/143117881

版权

在这里插入图片描述

汉字描红字帖拼音字帖网页在线生成
需要自己找字体不然是黑体，网上下楷体替换font-face内容

<html>
<title>田字描红贴</title>

<head>
    <style>
        canvas {
            border: 1px solid gray;
        }

        @font-face {
            font-family: "pinyin";
            src: url("./GB2312.woff");
        }
    </style>
</head>

<body>

    <div for="name">最多16字: 生成后 图片另存为直接打印即可</div>
    <textarea id="story" name="story" rows="5" cols="33">啊啊啊啊</textarea>
    <select id="select" onchange="xiugai()">
        <option value="mi">汉字</option>
        <option value="sixian">拼音</option>
    </select>

    <input class="styled" type="button" value="生成" onclick="shengcheng()" /> 
    <div  ><canvas id="canvas"></canvas></div>
    <div style="font-family: pinyin;">1 </div>
    <script>
        let type = 'mi'
        let select = document.getElementById('select');
        function xiugai() {
            console.log(select.value)
        }

        var canvas = document.getElementById('canvas');
        canvas.width = 1400;
        canvas.height = canvas.width * 1.414;
        var ctx = canvas.getContext('2d');
        ctx.font = '63px pinyin'; 
          

        function draw() {

            let verticalSpace = 20
            let textarea = document.getElementById("story");
            let content = textarea.value;
            console.log(content);
            if (!content) {
                alert('请输入字')
                return
            }
            let sa = content.split('');
            let i = 0;
            let w = 100, h = 100;
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            for (let y = 40; y < canvas.height - h; y += h + verticalSpace) {
                for (let x = 40; x < canvas.width - w; x += w) {
                    ctx.beginPath();
                    ctx.strokeStyle = "gray";
                    ctx.setLineDash([]);
                    ctx.strokeRect(x, y, w, h);
                    if (type == 'mi') {
                        ctx.beginPath();
                        ctx.strokeStyle = "gray";
                        ctx.setLineDash([5, 5]);
                        ctx.moveTo(x, y + h / 2);
                        ctx.lineTo(x + w, y + h / 2);
                        ctx.moveTo(x + w / 2, y);
                        ctx.lineTo(x + w / 2, y + h);
                        ctx.moveTo(x, y);
                        ctx.lineTo(x + w, y + h);
                        ctx.moveTo(x + w, y);
                        ctx.lineTo(x, y + h);
                        if (i < sa.length && x == 40) {
                            ctx.fillStyle = "tomato";
                            ctx.font = '80px pinyin';
                            ctx.fillText(sa[i], x+ w/8  , y+ h -20 );
                            i++;
                        }

                    }
                    if (type == 'sixian') {
                        ctx.beginPath();
                        ctx.strokeStyle = "gray";
                        ctx.setLineDash([5, 5]);
                        ctx.moveTo(x, y + h / 3);
                        ctx.lineTo(x + w, y + h / 3);
                        ctx.moveTo(x, y + h / 3 * 2);
                        ctx.lineTo(x + w, y + h / 3 * 2);
                        if (i < sa.length && x == 40) {
                            ctx.fillStyle = "tomato";
                            // ctx.fillText('a', x + 30, y + 65);
                            ctx.fillText(sa[i], x + 40 - sa[i].length * 10, y + 65);
                            i++;
                        }

                    }


                    ctx.stroke();
                }
            }
        }

        function shengcheng() {
            draw()
        }
        // setTimeout(() => {
        //     draw()
        // }, 100) 
    </script>
</body>

</html>

原文地址：