h5 canvas动画，不知道谁写的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>好困啊</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
}
#myCanvas {
display: block;
}
</style>
</head>
<body>
<canvas width="400" height="300" id="myLove"></canvas>
</body>
<script type="text/javascript">
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
/*
* basic stuff
*/
var FX = {
config : {
background : 'rgba(250,250,250,0.2)',
color : 'rgb(0,0,0)',//初始的颜色
highlight : 'rgb(0,0,0)'//鼠标经过de鼠标经过的yanse
},
dots : []
};
FX.canvas = document.getElementById('myLove');
FX.ctx = FX.canvas.getContext('2d');
/*
* Extend Math Object
*/
Math.TO_RAD = Math.PI/180;
Math.getDistance = function( x1, y1, x2, y2 ) {
var xs = 0,
ys = 0;
xs = x1 - x2;
ys = y1 - y2;
xs = xs * xs;
ys = ys * ys;
return Math.sqrt( xs + ys );
};
Math.getDegree = function( x1, y1, x2, y2 ) {
var dx = x2 - x1,
dy = y2 - y1;
return Math.atan2(dy,dx) / Math.TO_RAD;
};
/*
* Dot Object
*/
var Dot = function( opts ) {
this.color = opts.color;
this.x = 0;
this.y = 0;
this.dest_x = (opts.dest_x - 75);
this.dest_y = (opts.dest_y - 75);
};
Dot.prototype.update = function() {
var d = this,
dist_x = d.dest_x - d.x,
dist_y = d.dest_y - d.y;
d.x += dist_x * 0.05;
d.y += dist_y * 0.05;
FX.ctx.fillStyle = d.color;
FX.ctx.fillRect( d.x-2, d.y-2, 4, 4 );
};
/*
* full screen canvas
*/
FX.setFullscreen = function() {
FX.width = FX.canvas.width = window.innerWidth;
FX.height = FX.canvas.height = window.innerHeight;
};
/*
* Mouse
*/
FX.handleMouseEvent = function(e, power) {
var radius = 75,
k = FX.dots.length,
i=0,
mx, my,
dist, degree,
d;
if(e.offsetX) {
mx = e.offsetX;
my = e.offsetY;
} else if(e.layerX) {
mx = e.layerX;
my = e.layerY;
}
mx -= FX.width/2;
my -= FX.height/2;
for( ;i<k;i=i+1 ) {
d = FX.dots[i];
dist = Math.getDistance( mx, my, d.x, d.y);
if( dist < radius ) {
degree = Math.getDegree( d.x, d.y, mx, my );
d.x += (Math.cos( degree * Math.TO_RAD ) * ((radius-dist) * power));
d.y += (Math.sin( degree * Math.TO_RAD ) * ((radius-dist) * power));
d.color = FX.config.highlight;
} else {
d.color = FX.config.color;
}
}
};
/*
* create the heart
*/
FX.createHeart = function() {
var coords = [[1,4],[1,5],[1,6],[1,7],[1,8],[2,3],[2,4],[2,5],[2,6],[2,7],[2,8],[2,9],[3,2],[3,3],[3,4],[3,5],[3,6],[3,7],[3,8],[3,9],[3,10],[4,2],[4,3],[4,4],[4,5],[4,6],[4,7],[4,8],[4,9],[4,10],[4,11],[5,2],[5,3],[5,4],[5,5],[5,6],[5,7],[5,8],[5,9],[5,10],[5,11],[6,2],[6,3],[6,4],[6,5],[6,6],[6,7],[6,8],[6,9],[6,10],[6,11],[6,12],[7,3],[7,4],[7,5],[7,6],[7,7],[7,8],[7,9],[7,10],[7,11],[7,12],[8,3],[8,4],[8,5],[8,6],[8,7],[8,8],[8,9],[8,10],[8,11],[8,12],[8,13],[9,2],[9,3],[9,4],[9,5],[9,6],[9,7],[9,8],[9,9],[9,10],[9,11],[9,12],[10,2],[10,3],[10,4],[10,5],[10,6],[10,7],[10,8],[10,9],[10,10],[10,11],[11,2],[11,3],[11,4],[11,5],[11,6],[11,7],[11,8],[11,9],[11,10],[11,11],[12,2],[12,3],[12,4],[12,5],[12,6],[12,7],[12,8],[12,9],[12,10],[13,3],[13,4],[13,5],[13,6],[13,7],[13,8],[13,9],[14,4],[14,5],[14,6],[14,7],[14,8]],
k = coords.length,
raster = 10,
i = 0;
for( ;i<k;i=i+1 ) {
FX.dots.push( new Dot({
dest_x : coords[i][0] * raster,
dest_y : coords[i][1] * raster,
color: FX.config.color
}) );
}
};
/*
* main loop
*/
FX.loop = function() {
var ctx = FX.ctx,
k = FX.dots.length,
i = 0;
ctx.fillStyle = FX.config.background;
ctx.fillRect(0,0, FX.width, FX.height );
ctx.save();
ctx.translate( FX.width/2, FX.height/2 );
for( ;i<k;i=i+1 ) {
FX.dots[i].update();
}
ctx.restore();
requestAnimFrame( FX.loop );
};
/*
* Event bindings
*/
window.addEventListener('resize', FX.setFullscreen );
FX.canvas.addEventListener('mousemove', function(e) { FX.handleMouseEvent(e, -0.1); } );
FX.canvas.addEventListener('mousedown', function(e) { FX.handleMouseEvent(e, 1); } );
/*
* Init
*/
FX.setFullscreen();
FX.createHeart();
FX.loop();
</script>
</html>
h5 canvas动画，不知道谁写的的更多相关文章
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- H5 canvas绘制出现模糊的问题
在之前做移动端小游戏幸运转盘.九宫格转盘,使用到了 canvas ,也是第一次在项目中使用 canvas 来实现. 近期测试人员反应 canvas 绘制的内容太模糊,心想着用 canvas 绘制出来的 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- canvas动画3：交互
canvas动画3 时隔很久,本人终于又写博客了(重度拖延症),把之前留下的canvas交互动画讲一讲. 电脑上的交互,指的是鼠标和键盘,我们今天主要用的是鼠标. 既然是鼠标的话,就要获取鼠标的各种事 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
- 2015.4.23 贪吃蛇、canvas动画，各种上传工具，url信息匹配以及最全前端面试题等
1.面向对象贪吃蛇 2.css中:hover 改变图片 页面加载完 第一次鼠标移入会闪一下 这是为啥? 解决方法:你把两张图合成一张图或者是先把图片加载到页面上,然后再hover出来. 解析:图片 ...
- HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具
1.js配合传统css属性控制,可以使用setTimeout或者高级的requestAnimationFrame 2.css3 3.svg 4.canvas(当然,这个还是要配合js) 也许这么 ...
- 7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
- 8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
随机推荐
- php 多维数组排序
PHP中array_multisort可以用来一次对多个数组进行排序,或者根据某一维或多维对多维数组进行排序. 关联(string)键名保持不变,但数字键名会被重新索引. 输入数组被当成一个表的列并以 ...
- 31. Ubuntu15.04系统中如何启用、禁用客人会话
https://jingyan.baidu.com/article/046a7b3edf9639f9c27fa995.html 31. Ubuntu15.04系统中如何启用.禁用客人会话 听语音 | ...
- virtualenv是什么?virtualenv的安装及pycharm的配置和使用
virtualenv是什么? virtualenv是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.简单的说就是一 ...
- SpringMVC源码剖析（五)-消息转换器HttpMessageConverter
原文链接:https://my.oschina.net/lichhao/blog/172562 #概述 在SpringMVC中,可以使用@RequestBody和@ResponseBody两个注解,分 ...
- hash值
任何类都继承public int hashCode()方法,该方法返回的值是通过将该对象的内部地址转换为一个整数来实现的,hash表的主要作用就是在对对象进行散列的时候作为key输入.我们需要每个对象 ...
- Java对象空间分配流程
对象空间分配流程如下: 针对这个流程,分别解释一下每一个选项的使用场景. 栈上分配: 栈上分配的基础在于逃逸分析,逃逸分析可以得到三种对象的逃逸状态. 全局逃逸:一个对象的引用逃出了方法或者线程. ...
- 【数据库】SQL分组多列统计(GROUP BY后按条件分列统计)
select whbmbh ,zt,1 as tjsl from fyxx group by zt,whbmbh select whbmbh,sum(case zt when '有效' then 1 ...
- 【Python】内置函数
一.内置函数表格 详细信息 二.内置函数详情 2.1 abs(x) 返回绝对值 1 2 >>> abs(-5) 5 2.2 all(iterable) 如果这个可迭代的元素都为真,就 ...
- SWERC2015-I Text Processor
题意 给一个长度为\(n\)的字符串\(s\),再给定一个\(w\),问对于所有的\(i\in [1,n-w+1]\),\(s[i..i+w-1]\)有多少个不同字串.\(n,w\le 10^5\). ...
- bzoj5055: 膜法师（BIT）
大水题WA了两发T T 记录一下a[i]的前缀和,a[i]*a[j]就是sigma(a[j]*sumi[j-1]) 记录一下a[i]*a[j]的前缀和,a[i]*a[j]*a[k]就是sigma(a[ ...