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鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
随机推荐
- Java编程思想读书笔记--第21章并发
1.基本的线程机制 定义任务 public class LiftOff implements Runnable{ protected int countDown = 10; private stati ...
- 基于SMB共享文件夹的上传于下载
需要用到的jar包 http://pan.baidu.com/s/1skQFk77 1.首先在一台电脑上设置共享文件夹 ----上传下载的方法类 package com.strongit.tool ...
- 07_Java8新增的Lambda表达式
[Lambda表达式概述] Lambda表达式支持将代码块作为方法参数,Lambda表达式允许将使用简洁的代码来创建只有一个抽象方法的接口的实例.(这种接口称为函数式接口) [入门实例] packag ...
- 简单模拟Hibernate的主要功能实现
在学习期间接触到Hibernate框架,这是一款非常优秀的O/R映射框架,大大简化了在开发web项目过程中对数据库的操作.这里就简单模拟其底层的实现. /*******代码部分,及其主要注解***** ...
- Asp.net 图片文件防盗链介绍
想要实现文件放盗链的功能 首先添加一个全局文件 Global.asax 在 Application_BeginRequest中我们可以判断Http报文头中的UrlReferre是否来源本站. if ( ...
- GroupBox 重绘圆角边框和文字
private void GroupBox_Paint(object sender, PaintEventArgs e) { if (sender != null && sender ...
- AngularJS(3)-过滤器
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中.. 1.uppercase/lowercase 大小写过滤器 2.currency过滤器 3.向指令添加过滤器 过滤器可以通过一个管道字符( ...
- VB-获取本机计算机名，登录名、ip地址
真的是很简单,执行结果:Computer:不平凡总在于坚持 User:Administrator IP:192.168.0.111 '获取计算机名.用户名.本机ip Dim Loc ...
- C语言自带的快速排序（qsort）函数使用方法
感觉打快排太慢了,找到了c语言自带的函数.这函数用起来没c++的方便,不过也够了. 函数名称:qsort,在头文件:<stdlib.h>中 不多说,上代码: #include <st ...
- C语言基础知识-循环结构
用while打印出1~100之间7的倍数 int i = 1; while循环是当条件表达式的结果为真时,执行大括号里面的循环体,重复执行直到条件表达式的结果为假时结束循环. w ...