<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas变换曲线</title>
</head>
<style type="text/css">
body {
overflow: hidden;
background:#000;
margin:0;
}
</style>
<body>
<canvas id='changeLine'></canvas>
</body>
<script>
window.onload=function(){
var ctx=document.getElementById('changeLine');
var context=ctx.getContext('2d');
var winW=window.innerWidth;
var winH=window.innerHeight;
ctx.width=winW;
ctx.height=winH;
//包含每个点的信息的数组
var line=[];
var num=10;
var oldPoint =[];
//随机函数
function rnd(n,m){
return Math.floor(Math.random()*(m-n)+n)
}
//生成了10个点
for(var i=0;i<num;i++){
line[i]={
w:0,
h:0,
x:rnd(0,winW),
y:rnd(0,winH),
speedX:rnd(-5,5),
speedY:rnd(-5,5)
}
}
//画点
function drawPoint(p){
context.fillStyle='#fff';
context.fillRect(p.x,p.y,p.w,p.h);
context.strokeRect(p.x,p.y,p.w,p.h);
}
//定义每个点的速度,碰撞边界
function drawObj(){
var arr=[];
context.clearRect(0,0,winW,winH);
for(var i=0;i<num;i++){
drawPoint(line[i]);
line[i].x+=line[i].speedX;
line[i].y+=line[i].speedY;
if(line[i].x<=0){
line[i].x =0;
line[i].speedX*=-1;
}
if(line[i].x>=winW-line[i].w){
line[i].x = winW-line[i].w;
line[i].speedX*=-1;
}
if(line[i].y<=0){
line[i].y =0;
line[i].speedY*=-1;
}
if(line[i].y>=winH-line[i].h){
line[i].y = winH-line[i].h;
line[i].speedY*=-1;
} }
/*context.beginPath();
context.moveTo(line[0].x,line[0].y);
for(var j =1; j < num; j++){
context.lineTo(line[j].x,line[j].y);
}
context.strokeStyle ="rgba(255,0,144,1)";
context.closePath();
context.stroke();*/ for(var i =0; i <num ; i++){
arr.push({x:line[i].x , y:line[i].y});
}
oldPoint.push(arr);
while(oldPoint.length >15){
oldPoint.shift();
}
for(var i =0; i < oldPoint.length; i++){
context.beginPath();//开始
context.moveTo(oldPoint[i][0].x,oldPoint[i][0].y);//起点
for(var j =1; j < num; j++){
context.lineTo(oldPoint[i][j].x,oldPoint[i][j].y);//每个点连接起来
}
context.closePath();//闭合
var opacity = i/oldPoint.length;
context.strokeStyle ="rgba(255,0,144,"+opacity+")";
context.stroke();
}
}
drawObj();
setInterval(drawObj,1000/60);
window.onresize =function(){
winW = window.innerWidth;
winH = window.innerHeight;
canvas.width = winW;
canvas.height = winH;
};
}
</script>
</html>

  

最新文章

  1. 当 IDENTITY_INSERT 设置为 OFF 时,不能向表 &#39;OrderList&#39; 中的标识列插入显式值
  2. PHP 三元运算符省略写法
  3. 再也不用管UIImagePicker的代理了
  4. kafka迁移数据目录
  5. 动态调用webservice 接口
  6. 使用viewpager实现广告条轮询的效果
  7. BZOJ 1497: [NOI2006]最大获利( 最大流 )
  8. Oracle listener lsnrctl
  9. listview的简单封装
  10. BZOJ 3938 Robot
  11. Asp.Net Core 轻松学-从安装环境开始
  12. 个人对于 Maven 的理解
  13. linux常用命令和关闭防火墙
  14. E. Kefa and Watch hash 线段树
  15. php使用fputcsv进行大数据的导出
  16. hdu 1394(线段树) 最小逆序数
  17. 用SpringSecurity从零搭建pc项目-02
  18. PS辅助工具Assistor PS
  19. Java SQL注入学习笔记
  20. Apache和Nginx的Rewrite规则对比

热门文章

  1. 为什么要学习Linux
  2. css性能优化
  3. mvc路由,mvc区域
  4. Linux_解决nohup命令生成的多余的大日志文件
  5. git命令常见问题总结
  6. 启动android程序和虚拟机时候出现如下错误的解决方法
  7. [MSDN] GROUP BY (Transact-SQL)
  8. python bottle 框架开发任务管理系统 V_1.0版
  9. css,js工具篇
  10. MongoDB Java
  11. Python档案袋(异常与异常捕获 )
  12. Linux 大爆炸:一个内核,无数发行版
  13. Centos 6.8安装ideaIU-2017.2.6-no-jdk
  14. /proc文件系统(二):/proc/&lt;pid&gt;/stat
  15. mysql数据库的test类型
  16. python---random模块详解
  17. hdu 3415 Max Sum of Max-K-sub-sequence 单调队列优化DP
  18. 【node.js】readline (逐行读取)
  19. 简单版AC自动机
  20. bzoj 2055 80人环游世界