<!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. WCF编程系列(五)元数据

    WCF编程系列(五)元数据   示例一中我们使用了scvutil命令自动生成了服务的客户端代理类: svcutil http://localhost:8000/?wsdl /o:FirstServic ...

  2. Appium 解决中文输入问题

  3. 问题解决：使用angularjs、ionic框架如何实现返回上一页并刷新

    普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后 ...

  4. python拆分excel脚本

    因为需要将一个很大的excel按500条拆分为多个excel,手工操作实在太麻烦,就写了个python小脚本,现在是分为了多个sheet页,使用者可根据自己实际情况修改成多个文件的形式 #!/usr/ ...

  5. 把URL传递参数转变成自定义实体方法

    先定义下要获取的实体: public class InputClass { public long Id { get; set; } public int Status { get; set; } p ...

  6. 超过130个你需要了解的vim命令

    基础 :e filename Open filename for edition :w Save file :q Exit Vim :q! Quit without saving :x Write f ...

  7. QtSQL学习笔记（4）- 使用SQL Model类

    除了QSqlQuery,Qt提供了3个高级类用于访问数据库.这些类是QSqlQueryModel.QSqlTableModel和QSqlRelationalTableModel. 这些类是由QAbst ...

  8. Windows Phone 8 开发初体验

    Windows Phone 8 是当前除了Android.IPhone之外,第3大智能手机运行平台.作为微软技术的忠实fans,一直关注和跟进微软技术的最新进展.这里就给大家简单介绍一下,如何进行Wi ...

  9. jquery-easyui使用

    1,闲来无事用了一下jquery-easyui,首先下载下来easyui,文件夹如图 2,将themes里面的东西整体拷贝,我是整体的,省的麻烦了 3,在在自己的vs里面新建一个mvc的项目(项目自己 ...

  10. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...