canvas实现动态效果，炫酷canvas动画
程序员文章站
2022-05-26 16:30:33
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas动态效果</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
* {
margin: 0;
padding: 0;
font-family: 微软雅黑;
}
body,html{background: #fff;overflow: hidden}
canvas{
background: #000;
}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random()*(m-n))+n;
}
window.onload = function () {
var oC=document.getElementById('c1');
var winW=document.documentElement.clientWidth;
var winH=document.documentElement.clientHeight;
oC.width=winW;
oC.height=winH;
var gd = oC.getContext('2d');
var N=5;
var aPos=[];
var LEN=50;
var oldArr=[];
for(var i=0;i<N;i++){
aPos.push({
x:rnd(0,oC.width),
y:rnd(0,oC.height),
iSpeedX:rnd(-15,15),
iSpeedY:rnd(-15,15),
});
}
setInterval(function(){
gd.clearRect(0,0,oC.width,oC.height);
for(var i=0;i<aPos.length;i++){
aPos[i].x += aPos[i].iSpeedX;
aPos[i].y += aPos[i].iSpeedY;
//限定
if(aPos[i].x<0){
aPos[i].x=0;//限定
aPos[i].iSpeedX *= -1;
}
if(aPos[i].y<0){
aPos[i].y=0;//限定
aPos[i].iSpeedY *= -1;
}
if(aPos[i].x>winW){
aPos[i].x=winW;//限定
aPos[i].iSpeedX *= -1;
}
if(aPos[i].y>winH){
aPos[i].y=winH;//限定
aPos[i].iSpeedY *= -1;
}
draw(aPos[i].x,aPos[i].y);
}
gd.strokeStyle='#fff';
gd.beginPath();
gd.moveTo(aPos[0].x,aPos[0].y);
for(var i=1;i<aPos.length;i++){
gd.lineTo(aPos[i].x,aPos[i].y);
}
gd.closePath();
gd.stroke();
var arr=[];
for(var i=0; i<aPos.length; i++){
arr[i]={
x:aPos[i].x,
y:aPos[i].y
};
}
oldArr.push(arr);
if(oldArr.length>LEN) oldArr.shift();
for(var i=0; i<oldArr.length; i++){
gd.beginPath();
var opacity=i/oldArr.length;
gd.strokeStyle='rgba(255,255,255,'+opacity+')';
gd.moveTo(oldArr[i][0].x, oldArr[i][0].y);
for(var j=0; j<oldArr[i].length; j++){
gd.lineTo(oldArr[i][j].x, oldArr[i][j].y);
}
gd.closePath();
gd.stroke();
}
},16);
function draw(x,y){
var w=1;
var h=1;
gd.fillStyle='#fff';
gd.fillRect(x-w/2,y-h/2,w,h);
}
};
</script>
</head>
<body>
<canvas id="c1"></canvas>
</body>
</html>