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鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
随机推荐
- zabbix的邮件报警
邮件报警插件 #!/usr/bin/python #coding:utf-8 import smtplib from email.MIMEText import MIMEText import os ...
- SVN-钩子
先说说钩子是干什么的吧,,简单的说,svn钩子就是在提交svn时前后所要触发的事件,于是我们可以用钩子做一些提交时的限制,及提交后的操作.最常用的一般有两个,pre-commit,post-commi ...
- 【JSP&Servlet学习笔记】4.会话管理
Http本身是无状态通信协议,要进行会话管理的基本原理,就是将需要维护的状态回应给浏览器,由浏览器在下次请求时主动发送状态信息,让Web应用程序“得知”请求之间的关联. 隐藏字段是将状态信息以窗体中看 ...
- LPC17XX 数据手册摘要之系统时钟与功率控制
系统时钟与功率控制 一.系统时钟 LPC17XX有三个独立的时钟振荡器,分别是主振荡器(MIAN_OSC).内部RC振荡器(IRC_OSC).实时时钟振荡器(RTC_OSC).LPC17XX时钟框图如 ...
- Redhat 6.5 x64 下载地址
http://ftp.okhysing.is/ftp/redhat/6.5/isos/x86_64/
- 51nod1057 N的阶乘
输入N求N的阶乘的准确值. Input 输入N(1 <= N <= 10000) Output 输出N的阶乘 Input示例 5 Output示例 120参考博客:blog.csdn. ...
- CRUD生成器DBuilder设计与实现
源码位于github:https://github.com/lvyahui8/dbuilder.git .文中图片如果太小看不清楚,请右键点击“在新标签页中打开”即可看到原图 有兴趣还可以加QQ群交流 ...
- javascript cookie 操作
<html> <head> <meta charset="utf-8"> <title>Javascript cookie</ ...
- [CSS]font- 属性
所有浏览器都支持 font 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 font 简写属性在一 ...
- CentOS 6.5升级Python后yum不可用的解决方案
因开发需要,今天把CentOS 6.5自带的Python2.6.6升级到了Python2.7.3.按照如下步骤进行升级 1.查看当前系统python的版本 python -V 2.下载2.7.3版本的 ...