当前位置：网站首页>Canvas analog input box input

Canvas analog input box input

2022-07-28 00:59:00 【Jedi Hongbin】

Please add a picture description
function ：
The insertion point flashes when input stops Insert point update on input 

<!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); } /** *  Update line color  */ setLineColor(lineColor) {
       this.lineColor = lineColor; } /** *  Draw a vertical line  */ 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(); } /** *  Update the coordinates of the insertion point  */ 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 the insertion point  */ clear() {
       this.ctx.clearRect(this.prevInterPoint[0] - this.lineWidth / 2 - 1, this.prevInterPoint[1], this.prevInterPoint[0] + this.lineWidth, this.prevInterPoint[1] + this.lineHength); } /** *  loop   Draw insertion point   Add flashing behavior  */ drawInsetPoint(state) {
       if (state) {
       this.updateInterPoint(); this.drawVerticalLine(...this.prevInterPoint, this.lineHength); } else {
       this.clear(); } this.timer = setTimeout(() => {
       this.drawInsetPoint(!state); }, this.delay); } /** *  Update now  */ immediatelyUpdate() {
       clearTimeout(this.timer); this.drawInsetPoint(true); } } const interPoint = new InterPoint(ctx, 5, fontSize, 500); function render() {
       // Empty the canvas  ctx.clearRect(0, 0, width, height); // Draw text  inputs.forEach((input, index) => {
       drawText(input, 0, index * fontSize + height / 2); }); interPoint.immediatelyUpdate(); } const drawText = (text, x, y) => {
       ctx.beginPath(); ctx.font = `${
        fontSize}px  Microsoft YaHei `; 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) {
       // I can't put down a line  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>
原网站

版权声明
本文为[Jedi Hongbin]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/209/202207272221595535.html

边栏推荐

猜你喜欢

随机推荐