Canvas 眼睛随输入文本移动
2018-05-05 本文已影响0人
哲_29be
看了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
