<!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>
