<!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. netbeans环境中使用maven搭建jsf、primefaces工程

    新建maven工程,选择web工程 增加jsf框架,加入primefaces 部署到服务器,在浏览器中打开页面,这是primefaces框架的页面. 此时工程web目录下有如下文件 web.xml文件 ...

  2. ###STL学习--标准模板库

    下面进行STL的学习.希望能了解标准模板库中的常用容器,迭代器,可以自由运用STL以提高编写代码的效率.下面的内容我想以知识点为总结,不再像<Effective C++>那样以章节进行总结 ...

  3. SQL Constraint/Index

    1.SQL Constraint Integrity Constraints are used to apply business rules for the database tables. The ...

  4. 暑假集训(2)第五弹 ----- Who's in the Middle（poj2388)

    G - Who's in the Middle Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32 ...

  5. C++带参数默认值的函数

    定义形式: void fun(int a = 1 ,int b = 2 ,int c = 3 ,int d = 4){ //函数定义 cout<<"a="<< ...

  6. javascript中的sort()方法

    现在在学习javascript中,发现sort()函数是有点奇怪的东西(可能是本人水平的问题-_-!),于是就在这里记录一下自己找到的东西吧.sort()这个方法的参数很奇怪,必须是函数,但也是可选参 ...

  7. logback使用笔记

    三大主要元素 looger:记录日志 appender:输出目的地 layout:输出格式 必要步骤: 一.引入包: import org.slf4j.Logger; import org.slf4j ...

  8. Python设计模式——观察者模式

    需求:员工上班在偷偷看股票,拜托前台一旦老板进来,就通知他们,让他们停止看股票. 这里有两类人,一类是观察者,即员工,一类是通知者,即前台,员工在观察前台的状态,前台负责通知员工最新的动态. #enc ...

  9. WPF从入门到放弃系列第二章 XAML

    本文是作者学习WPF从入门到放弃过程中的一些总结,主要内容都是对学习过程中拜读的文章的整理归纳. 参考资料 XAML 概述 (WPF):https://msdn.microsoft.com/zh-cn ...

  10. 一步步学习NHibernate(3)——NHibernate增删改查

    请注明转载地址:http://www.cnblogs.com/arhat 在上一章中,我们配置了以下NHibernate的运行环境, 并介绍了NHibernate的中两个非常中重要的接口"I ...