canvas基础之动态线条---致敬windows98
2017-05-31 本文已影响0人
web蜗牛
还记得这货吗？初中每周一节的计算机课，因为不能联网，所以基本上半节课都在玩儿这个屏幕保护图案...就是这么无聊，但却有满满的回忆。
最近一直忙于写原生JS，对于H5和CSS3略有生疏，于是拿出一个经典的图形来练练canvas的一些基本知识。
win98.jpg
先来html和css部分，简单的韩红看了想打人：
<body>
<canvas id="can"></canvas>
</body>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
canvas{
background:#000;
}
</style>
废话不啰嗦，直接进入js部分，上代码：
<script>
function ran(n,m){
return parseInt(Math.random()*(m-n)+n)
}
window.onload=function(){
var oC=document.querySelector('#can');
var gd=oC.getContext('2d');//创建2D画笔
var winW=document.documentElement.clientWidth;
var winH=document.documentElement.clientHeight;
oC.width=winW;
oC.height=winH;
var Len=15;//尾巴个数
var N=5; //转折点个数
var arr=[]; //存每个转折点的xy坐标和x轴y轴运动速度
for(var i=0;i<N;i++){
arr[i]={
x:ran(0,winW),
y:ran(0,winH),
iSpeedX:ran(-10,10),
iSpeedY:ran(-10,10)
}
}
var pw=1;//每个转折点的宽
var ph=1;//每个转折点的高
var oldArr=[];//存第一个线条
function draw(json){
gd.fillStyle = '#fff';
gd.fillRect(json.x-pw/2,json.y-ph/2,pw,ph)
}
setInterval(function(){
//先准备五个点
gd.clearRect(0,0,oC.width,oC.height);
for(var i=0;i<arr.length;i++){
//边界 碰到边界反向掉头继续运动
if(arr[i].x<=100){
arr[i].x=100;
arr[i].iSpeedX*=-1;
}else if(arr[i].x>=oC.width-100){
arr[i].x=oC.width-100;
arr[i].iSpeedX*=-1;
}
if(arr[i].y<=100){
arr[i].y=100;
arr[i].iSpeedY*=-1;
}else if(arr[i].y>=oC.height-100){
arr[i].y=oC.height-100;
arr[i].iSpeedY*=-1;
}
arr[i].x+=arr[i].iSpeedX;
arr[i].y+=arr[i].iSpeedY;
draw(arr[i]);
}
//开始沿着五个点画线
gd.beginPath();//重新开启画笔
gd.moveTo(arr[0].x,arr[0].y);//起始位置
for(var i=1;i<arr.length;i++){
gd.lineTo(arr[i].x,arr[i].y)
}//路径
gd.closePath();//闭合路径
gd.strokeStyle = 'rgb('+ran(0,255)+','+ran(0,255)+','+ran(0,255)+')';
gd.stroke();//描边
//画剩下的几条线
var arr2=[];//存新的点
for(var i=0;i<arr.length;i++){
arr2[i]={
x:arr[i].x,
y:arr[i].y
}
}
oldArr.push(arr2);//****存上次的数据
呐，重点来了，敲黑板！！其实第二条线是延续第一条线200ms前的路径，第三条线是延续第一条线400ms前的路径，so，只要mei200ms存够15次路径就够用了。
if(oldArr.length>Len){
oldArr.shift();
}//保证只有十五条数据就够了
for(var i=0;i<oldArr.length;i++){
gd.beginPath();
gd.moveTo(oldArr[i][0].x,oldArr[i][0].y);
for(var j=1;j<oldArr[i].length;j++){
gd.lineTo(oldArr[i][j].x,oldArr[i][j].y);
}
gd.closePath();
gd.strokeStyle = 'rgb('+ran(0,255)+','+ran(0,255)+','+ran(0,255)+')';
gd.stroke();
}
},200)
}
</script>
H5 canvas基础的确很简单，但是要落实到每一个具体效果上，还要有清晰的逻辑并且巧妙的结合JS才能完成，加油！
