<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="utils.js"></script>

    <script type="text/javascript" src="ball.js"></script>

    <style type="text/css">

        body{background-color: silver;}

        #canvas{background-color: white;}

    </style>

</head>

<body>

    <canvas id="canvas" width="400" height="400"></canvas>

    <script type="text/javascript">

        window.onload=function(){

            var canvas=document.getElementById("canvas"),

                context=canvas.getContext("2d"),

                mouse=utils.captureMouse(canvas),

                arrow=new Ball(),

                speed=3;

            (function drawScreen(){

                window.requestAnimationFrame(drawScreen,canvas);

                context.clearRect(0,0,canvas.width,canvas.height);

                var dx=mouse.x-arrow.x,

                    dy=mouse.y-arrow.y,

                    angle=Math.atan2(dy,dx),

                    vx=Math.cos(angle)*speed,

                    vy=Math.sin(angle)*speed;

                arrow.rotation=angle;

                arrow.x+=vx;

                arrow.y+=vy;

                arrow.draw(context);

            }())

        }

    </script>

</body>

</html>
function Arrow(){

    this.x=0;

    this.y=0;

    this.color='#ffff00';

    this.rotation=0;

}

Arrow.prototype.draw=function(context){

    context.save();

    context.translate(this.x,this.y);

    context.rotate(this.rotation);

    context.lineWidth=2;

    context.fillStyle=this.color;

    context.beginPath();

    context.moveTo(-50,-25);

    context.lineTo(0,-25);

    context.lineTo(0,-50);

    context.lineTo(50,0);

    context.lineTo(0,50);

    context.lineTo(0,25);

    context.lineTo(-50,25);

    context.lineTo(-50,-25);

    context.closePath();

    context.fill();

    context.stroke();

    context.restore();

}

function Ball(radius,color){

    if (radius===undefined) {

        radius=40;

    }

    if (color===undefined) {

        color="#ff0000";

    }

    this.x=0;

    this.y=0;

    this.radius=radius;

    this.rotation=0;

    this.scaleX=1;

    this.scaleY=1;

    this.color=utils.parseColor(color);

    this.lineWidth=1;

}

Ball.prototype.draw=function(context){

    context.save();

    context.translate(this.x,this.y);

    context.rotate(this.rotation);

    context.scale(this.scaleX,this.scaleY);

    context.lineWidth=this.lineWidth;

    context.fillStyle=this.color;

    context.beginPath();

    context.arc(0,0,this.radius,0,(Math.PI*2),true);

    context.closePath();

    context.fill();

    if(this.lineWidth>0){

        context.stroke();

    }

    context.restore();

}
if (!window.requestAnimationFrame) {

  window.requestAnimationFrame = (window.webkitRequestAnimationFrame ||

                                  window.mozRequestAnimationFrame ||

                                  window.msRequestAnimationFrame ||

                                  window.oRequestAnimationFrame ||

                                  function (callback) {

                                    return window.setTimeout(callback, 17 /*~ 1000/60*/);

                                  });

}

if (!window.cancelAnimationFrame) {

  window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||

                                 window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||

                                 window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||

                                 window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||

                                 window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||

                                 window.clearTimeout);

}

window.utils = {};

window.utils.captureMouse = function (element) {

  var mouse = {x: 0, y: 0, event: null},

      body_scrollLeft = document.body.scrollLeft,

      element_scrollLeft = document.documentElement.scrollLeft,

      body_scrollTop = document.body.scrollTop,

      element_scrollTop = document.documentElement.scrollTop,

      offsetLeft = element.offsetLeft,

      offsetTop = element.offsetTop;

  element.addEventListener('mousemove', function (event) {

    var x, y;

    if (event.pageX || event.pageY) {

      x = event.pageX;

      y = event.pageY;

    } else {

      x = event.clientX + body_scrollLeft + element_scrollLeft;

      y = event.clientY + body_scrollTop + element_scrollTop;

    }

    x -= offsetLeft;

    y -= offsetTop;

    mouse.x = x;

    mouse.y = y;

    mouse.event = event;

  }, false);

  return mouse;

};

html5 鼠标跟随运动的更多相关文章

  1. javascript运动系列第七篇——鼠标跟随运动

    × 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随 前面的话 运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...

  2. HTML5鼠标hover的时候图片放大的效果展示

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 基于html5鼠标悬停图片动画展示效果

    分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  4. 精选 5 个漂亮的 CSS3 图片滑过特效

    这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...

  5. js math atan2

    在双十二活动中,视觉要求实现一个鼠标跟随运动的的效果,就像“觉”的那个效果类似 其实原理很简单,看鼠标从哪个方向进的及从哪个方向出的,然后区块里绝对定位的浮层就可以根据鼠标方向 运动; 如:在鼠标进入 ...

  6. html5中canvas的使用 获取鼠标点击页面上某点的RGB

    1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...

  7. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  8. HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择

    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...

  9. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

随机推荐

  1. Ext.Net学习笔记23：Ext.Net TabPanel用法详解

    Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...

  2. Mysql 冷备份批处理

    @Rem Generate today date @echo wscript.echo dateadd("d",0,date)>GetOldDate.vbs @for /f ...

  3. 在Xcode6中找回失去的模板

    [Add]2014.07.27 添加OC category.protocol模板 Xcode 6从beta 3开始在创建新项目窗口中移除了“Empty Application”,如下: 其他选项很不幸 ...

  4. 数据库E-R模型，数据字典

    概述:实体-联系模型(简称E-R模型) 模型结构: E-R模型的构成成分是实体集.属性和联系集,其表示方法如下: (1) 实体集用矩形框表示,矩形框内写上实体名. (2) 实体的属性用椭圆框表示,框内 ...

  5. [译]JavaScript 错误和处理

    JavaScript的调试是一个噩梦:一些错误刚开始很难理解,并且给出的错误函数也经常是没用的.如果把错误都列出来并给出解决办法会不会很有用呢. 下面列出了JavaScript一系列的奇怪错误.对于同 ...

  6. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  7. FreeMarker-Built-ins for numbers

    http://freemarker.org/docs/ref_builtins_number.html#topic.extendedJavaDecimalFormat Page Contents ab ...

  8. SQLite cans and can'ts

    SQLite 能做的 和 不能做的 1.SQLite_open/SQLite_open_v2

  9. c#编写简单计算器

    刚接触c#,依照惯例,写个简单的计算器,只写了加法,乘法,其他的类似,编辑器用的vs2008 首先打开vs ,新建c#的Windows窗体应用程序,接下来的项目的名称是WindowsFormsAppl ...

  10. Windows server2008/2012 安装oracle 11 创建实例HANG住在百分之2

    Windows server2008/2012 安装oracle 11.2.0.1的时候,可能会在创建数据库实例的时候卡在百分之2的地方. 这个时候可以 1.点击开始菜单,在“搜索程序和文件”中输入“ ...