看了https://juejin.im/post/5ae802a46fb9a07ac55fec04的文章，想實(shí)現(xiàn)一個(gè)眼睛隨輸入文本移動(dòng)的效果
雖然最后實(shí)現(xiàn)的效果很差，但過程中學(xué)到了很多東西
最后效果：
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));
}
//輸入改變時(shí)改變眼球位置
function OnInput (event) {
repaint();
}
// Internet Explorer
function OnPropChanged (event) {
repaint();
}
//獲取文本長(zhǎng)度
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>
輸入文本立刻觸發(fā)事件
<input type="" name="" id="email" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)">
//輸入改變時(shí)改變眼球位置
function OnInput (event) {
repaint();
}
// Internet Explorer
function OnPropChanged (event) {
repaint();
}
oninput在<input>或<textarea>的值發(fā)生改變時(shí)觸發(fā)，不需要等到元素失去焦點(diǎn)，是實(shí)時(shí)的。它是HTML5的事件，可用于檢測(cè)文本類輸入框的值。
缺陷：從腳本中修改值不會(huì)觸發(fā)事件。從瀏覽器下拉提示框里選取值時(shí)不會(huì)觸發(fā)。IE9 以下不支持，所以IE9以下可用onpropertychange 事件代替。
計(jì)算文本寬度：
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;
};
一開始想計(jì)算字體的寬度但字體不是等寬的所以不能準(zhǔn)確計(jì)算出文本的長(zhǎng)度，后來通過查詢使用上面的方法，但這個(gè)方法會(huì)改變Dom結(jié)構(gòu)，感覺不是一個(gè)很好的方法，不知道有沒有更好的方法
計(jì)算眼球的位置
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
