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鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
随机推荐
- UIButton关于setFont方法过时的解决方法
环境:xcode7 语言:Object-c 解决方法:更改UIButton的titleLabel属性的font值 一.新建一个Single View Application项目 二.创建一个UIBut ...
- js 金额格式化
//格式化金额 function fmoney(s, n) { n = n > 0 && n <= 20 ? n : 2; s = parseFloat((s + &quo ...
- 函数-头文件//Calculator.h
// // Calculator.h // 函数-头文件 // // Created by zhangxueming on 15/6/2. // Copyright (c) 2015年 zhangxu ...
- Eclipse Memory Analysis进行堆转储文件分析
生成堆转储文件 新建项目,设置Eclispe Java堆的大小: (1)限制Java堆大小:将最小值 -Xms参数与最大值-Xmx参数设置一样可避免堆的扩展 -Xmx20m -Xms2 ...
- 395. Longest Substring with At Least K Repeating Characters
395. Longest Substring with At Least K Repeating Characters 我的思路是先扫描一遍,然后判断是否都满足,否则,不满足的字符一定不出现,可以作为 ...
- php header示例代码(推荐)
<?php /*** Function: PHP header() examples (PHP) ** Desc: Some examples on how to use the header( ...
- 基本上，把switch,用设计模式代替，肯定是bug和过度设计。想想，本来修改一个文件几行代码可以解决的问题，变成修改3-6个类才能实现一样的功能。不是傻是什么？
那些迷信设计模式的人,来修改一下这个方法吧.看看你最终的代码膨胀为几倍... public virtual PasswordChangeResult ChangePassword(ChangePass ...
- Windows Phone 8 开发初体验
Windows Phone 8 是当前除了Android.IPhone之外,第3大智能手机运行平台.作为微软技术的忠实fans,一直关注和跟进微软技术的最新进展.这里就给大家简单介绍一下,如何进行Wi ...
- Centos 6.2 32位机器安装新的JDK和Weblogic
一.首先卸载自带的JDK 1.查看自带的java版本. root@admin]#java -version java version "1.6.0" OpenJDK Runtime ...
- CGRectOffset与CGRectInset的计算公式
(1)CGRectInset CGRect CGRectInset ( CGRect rect, CGFloat dx, CGFloat dy ); 该结构体的应用是以原rect为中心,再参考dx,d ...