美文网首页Web 前端开发
Canvas 眼睛随输入文本移动

Canvas 眼睛随输入文本移动

作者: 哲_29be | 来源:发表于2018-05-05 13:48 被阅读0次

看了https://juejin.im/post/5ae802a46fb9a07ac55fec04的文章,想实现一个眼睛随输入文本移动的效果
虽然最后实现的效果很差,但过程中学到了很多东西

最后效果:


test.gif

主要代码:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
    <style type="text/css">
        body {
            font-size: 20px;
        }
        
        #email {
            width: 200px;
            height: 40px;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript" src="./jquery.js"></script>
</head>  
<body>
    <canvas id="myCanvas" width="600px" height="200px" style="border: 1px solid #DDDDDD">
    </canvas>
    
    <form>
        <input type="" name="" id="email" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)">
    </form>

    <script type="text/javascript">
        function paint(left_x, left_y, right_x, right_y) {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.clearRect(0, 0, 600, 200);
            ctx.beginPath();
            ctx.arc(100,200,100,Math.PI,0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(50,113,25,2.5,5.9);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(150,113,25,3.6,0.7);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(50,180,20,2*Math.PI,0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(150,180,20,2*Math.PI,0);
            ctx.stroke();
            //左眼球
            ctx.beginPath();
            ctx.arc(left_x,left_y,5,2*Math.PI,0);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();
            //右眼球
            ctx.beginPath();
            ctx.arc(right_x,right_y,5,2*Math.PI,0);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.stroke();
        }

        paint(50, 190, 150, 190);

        function repaint() {
            var angle = 130 - textWidth(document.getElementById("email").value) / 200 * 80;

            paint(50 + 10 * Math.cos(angle * Math.PI / 180), 190 + Math.sin(angle * Math.PI / 180), 150 + 10 * Math.cos(angle * Math.PI / 180), 190 + Math.sin(angle * Math.PI / 180));
        }
        //输入改变时改变眼球位置
        function OnInput (event) {
            repaint();
        }

        // Internet Explorer
        function OnPropChanged (event) {
            repaint();
        }

        //获取文本长度
        var textWidth = function(text){ 
            var sensor = $('<p>'+ text +'</p>').css({display: 'none'}).css({'font-size': '20px'}); 
            $('body').append(sensor); 
            var width = sensor.width();
            sensor.remove(); 
            return width;
        };
    </script>
</body>
</html>  

输入文本立刻触发事件

<input type="" name="" id="email" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)">
//输入改变时改变眼球位置
        function OnInput (event) {
            repaint();
        }

        // Internet Explorer
        function OnPropChanged (event) {
            repaint();
        }

oninput在<input>或<textarea>的值发生改变时触发,不需要等到元素失去焦点,是实时的。它是HTML5的事件,可用于检测文本类输入框的值。
缺陷:从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持,所以IE9以下可用onpropertychange 事件代替。

计算文本宽度:

var textWidth = function(text){ 
            var sensor = $('<p>'+ text +'</p>').css({display: 'none'}).css({'font-size': '20px'}); 
            $('body').append(sensor); 
            var width = sensor.width();
            sensor.remove(); 
            return width;
};

一开始想计算字体的宽度但字体不是等宽的所以不能准确计算出文本的长度,后来通过查询使用上面的方法,但这个方法会改变Dom结构,感觉不是一个很好的方法,不知道有没有更好的方法

计算眼球的位置
https://blog.csdn.net/can3981132/article/details/52559402

20160917000925189.png

p2 (x1,y1), 其中angle = 30
x1 = x0 + r * cos(angle * PI / 180)
y1 = y0 + r * sin(angle * PI /180)

github地址 https://github.com/zheever/bear

相关文章

  • Canvas 眼睛随输入文本移动

    看了https://juejin.im/post/5ae802a46fb9a07ac55fec04的文章,想实现一...

  • HTML5 Canvas笔记——简单文本编辑功能

    编写在canvas环境中具有简单文本编辑功能的程序。 主要功能:(1)有跟随移动的闪烁的光标;(2)能输入、插入、...

  • Vi编辑器

    命令模式 文本输入模式 末行模式。 插入模式 移动光标: 删除命令: 撤销命令: 重复命令 文本行移动: 复制粘贴...

  • 一个Android长文本光标选中神器

    Android长文本输入栏神器:通过拖动进度条移动光标或选中文本。 Preview 短按拖动:移动光标长按拖动:选...

  • Kettle学习02:变量化文本文件路径

    点击“核心对象”,在“输入”文件夹中,将“文本文件输入”拖拽到画布中。 双击“文本文件输入”对象,鼠标移动到“文件...

  • canvas 模拟文本输入光标效果

    canvas虽然没有文本输入的API但是我们可以利用它先有的模拟一个后续我会继续补充完整 以达到可以文字输入的效果...

  • ios基础。小白篇

    文本 UIlable输入文本、输入文本框 UITextFiled \ UITextview单行输入文本框

  • 阅读体系的建立

    阅读系统建立原理,主要基于以下三个方面:输入—》处理—》输出 1,输入 眼睛 耳朵 有效输入 A,选择文本 1,如...

  • HTML+HTML5比较重要的知识点

    HTML5 1.改变:HTML5的设计目的是为了在移动设备上支持多媒体 2.canvas HTML 1.文本显示为...

  • 学习PPT文本有哪些基本操作

    学习PPT文本有哪些基本操作 在幻灯片中输入文本后,还可以根据需要对文本进行移动、复制、查找和替换等编辑操作,使幻...

网友评论

    本文标题:Canvas 眼睛随输入文本移动

    本文链接:https://www.haomeiwen.com/subject/wlzjrftx.html