html5 鼠标跟随运动

时间：2022-09-09 20:35:20
<!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=&quot ...

  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&plus;JS 《五子飞》游戏实现（六）鼠标响应与多重选择

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

  9. HTML5&plus;CSS3鼠标悬停图片特效

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

随机推荐

  1. js设计模式（5）---外观模式

    0.前言 早上好,今天天气不错,估计有35度吧,坐在空调室里相当惬意,那么酒足饭饱之后就应该干些正事了. 1. 为什么使用外观模式 外观模式提供了一个高层接口,封装一些复杂操作或繁琐行为,方便调用.门 ...

  2. zookeeper 删除snapshot和transaction log的源码解读

    转载请注明源地址http://www.cnblogs.com/dongxiao-yang/p/4910059.html zookeeper具有自动清除快照日志和事务日志的工能,可以在配置文件设置aut ...

  3. Swift&lowbar;UILabel

    一.初始化 // 初始化UIlabel,并设置frame //let labelOne = UILabel.init(frame: CGRect.init(x: 10, y: 20, width: 3 ...

  4. Android Studio Gradle 添加&period;so 支持文件

    近期发展Android Wear 关注商品.官员Demo所有gradle 工程. 当然,我也用eclipse配置一个可行的环境. 问题来了,eclipse,android studio 开发 andr ...

  5. JavaScript学习笔记（一）数组排序

    数组(Array)在JavaScript中是非常常用的类型,关于数组的排序,与C#等语法中的排序,乍看相似,其实差别比较大. Array的排序方法有两个,分别是reverse()和sort(). re ...

  6. 查看open office运行状态

    打开SSH工具: 1.ps -ef|grep soffice 2.cd /opt/jboss-eap-7.0 3.cd logs 4.tail -f subscription.log 然后就可以操作( ...

  7. mysql&lowbar;单表查询

    单表查询 比较符 当在子句中使用 <. >. <=. >=. <>或 !=时,字段的名字不加引号.如果使用引号,则查询出的结果为空,并且不会报错. ; 等号 当在子 ...

  8. C中的volatile用法&lbrack;转载&rsqb;

    volatile 影响编译器编译的结果,指出,volatile 变量是随时可能发生变化的,与volatile变量有关的运算,不要进行编译优化,以免出错,(VC++ 在产生release版可执行码时会进 ...

  9. Metasploit数据库问题汇总

    数据库在metaspoit中是相当重要的,当做一个大型渗透测试项目的时候,收集到的信息是相当大的,当和你的同伴一起协同作战的时候,你们可能 在不同的地方,所以数据共享很重要了!而且Metasploit ...

  10. android画板笔锋实现

    前言 在安卓绘图中,path是一个很常用的类,使用它可以实现基本的画线功能,但是自己用path画出来的同一条线段大小是不会改变的.如果做书写类型的软件,当然想要实现更好的逼真的书写效果,在实际书写过程 ...

相关文章