html5 鼠标跟随运动

<!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 鼠标跟随运动的更多相关文章

javascript运动系列第七篇——鼠标跟随运动
× 目录 [1]眼球转动 [2]苹果菜单[3]方向跟随前面的话运动除了直线运动和曲线运动两种运动形式外,还有一种运动形式是鼠标跟随运动,而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算 ...
HTML5鼠标hover的时候图片放大的效果展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
基于html5鼠标悬停图片动画展示效果
分享一款基于html5鼠标悬停图片动画展示效果.里面包含两款不同效果的html5图片展示效果.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
精选 5 个漂亮的 CSS3 图片滑过特效
这篇文章将为大家分享5款漂亮的CSS3图片滑过特效,比如滑过后显示图片的详细文字介绍,又比如滑过后对图片进行淡入淡出的效果等等.让我们一起来看看,喜欢的朋友赶紧收藏. 1.非常酷的CSS3图片说明效果 ...
js math atan2
在双十二活动中,视觉要求实现一个鼠标跟随运动的的效果,就像“觉”的那个效果类似其实原理很简单,看鼠标从哪个方向进的及从哪个方向出的,然后区块里绝对定位的浮层就可以根据鼠标方向运动; 如:在鼠标进入 ...
html5中canvas的使用获取鼠标点击页面上某点的RGB
1.html5中的canvas在IE9中可以跑起来.在IE8则跑不起来,这时候就需要一些东西了. 我推荐这种方法,这样显得代码不乱. <!--[if lt IE9]> <script ...
html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
HTML5+JS 《五子飞》游戏实现（六）鼠标响应与多重选择
上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...
HTML5+CSS3鼠标悬停图片特效
点击预览效果下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

随机推荐

反汇编windows htonl()函数
因为自己在系统内核写网络程序有时候需要调用htons htonl 这样的函数进行转换,但由于内核只能调用c运行库,别的API不能调用.自己也接触过一点汇编,从来没有去学过.看过老码识途这本书前几章,如 ...
HW-IP合法性_Java
描述现在IPV4下用一个32位无符号整数来表示,一般用点分方式来显示,点将IP地址分成4个部分,每个部分为8位,表示成一个无符号整数(因此不需要用正号出现),如10.137.17.1,是我们非常熟悉 ...
CodeForces 538B
Description A number is called quasibinary if its decimal representation contains only digits 0 or 1 ...
linux命令行下命令参数前的一横（-）和两横（--）的区别
原文转自:http://blog.csdn.net/songjinshi/article/details/6816776 在解释这些区别之前我们先了解一下有关linux的背景知识,这个需要大家先认真看 ...
sublime text3设置文件类型(CR/LF)
shell脚本加不加export的区别
加了export: jackyyu@ubuntu:~$ cat 1.sh #!/bin/dash test=test echo ${test} echo ${TERM} TERM=dumb expor ...
php socket connect permission denied
Linux在php socket连接时报错:permission denied 解决办法: # setsebool httpd_can_network_connect=1 参考来源: http://w ...
Python 基础篇：数据类型、数据运算、表达
1. 数据类型 1.1 数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-231-231-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取 ...
Python 3.5 for windows 10 通过pip安装mysqlclient模块 error:C1083
$pip install mysqlclient 运行结果如下: 可能是由于不兼容导致的(中间试过各种方法,比如本地安装mysql等等),最后找来mysqlclient-1.3.7-cp35-cp35 ...
poj 2342 Anniversary party 树形DP入门
题目链接:http://poj.org/problem?id=2342 题意:一家公司有1 <= N <= 6 000个职工,现要组织一些职工参加晚会,要求每个职工和其顶头上司不能同时参加 ...

html5 鼠标跟随运动

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

随机推荐

热门专题