canvas模拟输入框输入

Jedi Hongbin

已于 2022-07-25 06:21:05 修改

阅读量1.8k

点赞数 1

分类专栏： canvas 大前端文章标签： javascript 前端开发语言

于 2022-07-24 21:41:58 首次发布

本文链接：https://blog.csdn.net/printf_hello/article/details/125964837

版权

大前端同时被 2 个专栏收录

134 篇文章

订阅专栏

canvas

7 篇文章

订阅专栏

本文档展示了一个使用HTML5 Canvas实现的文本输入光标闪烁效果。通过JavaScript创建了一个类`InterPoint`，该类用于处理光标的绘制、颜色更新、清除和闪烁效果。当用户按下键盘键时，会更新输入文本，并即时刷新光标位置。此外，按退格键时会删除最后一个字符。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请添加图片描述
功能：
停止输入时插入点闪烁输入时插入点更新

<!DOCTYPE html>
<html lang="zn-ch">

<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" />
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid #51f;
        }
    </style>
</head>

<body>
    <!-- <canvas  width="500" height="500"></canvas> -->
    <script>
        const canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        const width = 700;
        const height = 500;
        const fontSize = 18;
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");

        const point = [0, height / 2];
        let inputs = [""];

        class InterPoint {
            timer;
            prevInterPoint = [0, 0];
            lineColor = '#51f';
            constructor(ctx, lineWidth, lineHength, delay) {
                this.ctx = ctx;
                this.lineHength = lineHength;
                this.lineWidth = lineWidth;
                this.delay = delay;
                this.drawInsetPoint(true);
            }
            /**
            * 更新线条颜色
            */
            setLineColor(lineColor) {
                this.lineColor = lineColor;
            }

            /**
            * 画垂直的直线
            */
            drawVerticalLine = (x, y, height) => {
                this.ctx.beginPath();
                this.ctx.lineWidth = this.lineWidth;
                this.ctx.moveTo(x, y);
                this.ctx.lineTo(x, y + height);
                this.ctx.strokeStyle = this.lineColor;
                this.ctx.stroke();
                this.ctx.closePath();
            }
            /**
            * 更新插入点坐标
            */
            updateInterPoint() {
                const x = this.ctx.measureText(inputs[inputs.length - 1]).width + 4;
                const y = (inputs.length - 1) * this.lineHength + height / 2;
                this.prevInterPoint = [x, y]
            }
            /**
            * 清除插入点
            */
            clear() {
                this.ctx.clearRect(this.prevInterPoint[0] - this.lineWidth / 2 - 1, this.prevInterPoint[1], this.prevInterPoint[0] + this.lineWidth, this.prevInterPoint[1] + this.lineHength);
            }

            /**
            * 循环 绘制插入点 添加闪烁行为
            */
            drawInsetPoint(state) {
                if (state) {
                    this.updateInterPoint();
                    this.drawVerticalLine(...this.prevInterPoint, this.lineHength);
                } else {
                    this.clear();
                }
                this.timer = setTimeout(() => {
                    this.drawInsetPoint(!state);
                }, this.delay);
            }
            /**
            * 立刻更新
            */
            immediatelyUpdate() {
                clearTimeout(this.timer);
                this.drawInsetPoint(true);
            }
        }

        const interPoint = new InterPoint(ctx, 5, fontSize, 500);

        function render() {
            //清空画布
            ctx.clearRect(0, 0, width, height);
            //绘制文字
            inputs.forEach((input, index) => {
                drawText(input, 0, index * fontSize + height / 2);
            });
            interPoint.immediatelyUpdate();
        }

        const drawText = (text, x, y) => {
            ctx.beginPath();
            ctx.font = `${fontSize}px 微软雅黑`;
            ctx.fillStyle = "#000";
            ctx.textBaseline = "top";
            ctx.fillText(text, x, y);
            ctx.closePath();
        };
        function handleDrawText(text) {

            const tempStr = inputs[inputs.length - 1] + text;
            const tempWidth = ctx.measureText(tempStr).width;
            if (tempWidth > width) {
                //一行放不下
                inputs.push(text);
            } else inputs[inputs.length - 1] += text;
            render();
        }

        function delText() {
            inputs[inputs.length - 1] = inputs[inputs.length - 1].substr(0, inputs[inputs.length - 1].length - 1)
            render();
        }

        window.addEventListener("keyup", e => {
            if (e.key === "Backspace") {
                delText();
            } else handleDrawText(e.key);
        });
    </script>
</body>

</html>