这两天学习canvas,把一些东西总结一下,比起枯燥的每一条的总结,直接上代码来的更直接。
index.html文件
<div class="box">
<div class="text">
<h2>欢迎来到canvs动画小球世界</h2>
<canvas id="canvas3" width="1500" height="400"></canvas>
</div>
</div>
index.js文件
var c=document.getElementById("canvas3");
var ctx=c.getContext("2d");
var arr=[];
var maxData=30;
//随机产生小球
timer=setInterval(function(){
//限定小球个数
if(arr.length>maxData){
clearInterval(timer);
}
//小球圆心坐标及半径随机产生
x=200+Math.ceil(Math.random()*600);
y=30+Math.ceil(Math.random()*100);
r=20+Math.ceil(Math.random()*10);
//小球颜色随机产生
var red=Math.floor(Math.random()*256);
var blue=Math.floor(Math.random()*256);
var green=Math.floor(Math.random()*256);
var alpha=0.5+Math.random()*0.3;
//小球运动速度随机产生(-2,2)之间
var sX=-2+Math.ceil(Math.random()*4);
var sY=-2+Math.ceil(Math.random()*4);
var obj={
background:`rgba(${red},${green},${blue},${alpha})`,
x:x,//随机小圆圆心坐标横坐标
y:y,//随机小圆圆心坐标纵坐标
r:r,随机小圆半径
sX:sX,//随机速度X
sY:sY//随机速度Y
}
//防止小球不动
if(sX!==0 || sY!==0){
arr.push(obj);
}
},1000/20);
//每一秒刷新60次画布,让小球动起来
setInterval(function(){
//画过之后清除画布,防止上次还在成为运动线
ctx.clearRect(0,0,c.width,c.height);
for(var i=0;i<arr.length;i++){
ctx.beginPath();
arr[i].x+=arr[i].sX;
arr[i].y+=arr[i].sY;
if(arr[i].y+arr[i].r>=c.height || arr[i].y-arr[i].r<=0){
arr[i].sY*=-1;
}
if(arr[i].x+arr[i].r>=c.width || arr[i].x-arr[i].r<=0){
arr[i].sX*=-1;
}
ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI);
ctx.fillStyle=arr[i].background;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.fill();
}
},1000/60);
index.css样式如下:
#canvas3{
border:1px solid blue;
width: 100%;
background-image: linear-gradient(rgba(100,200,190,0.7),rgba(230,160,200,0.9)):
}
.text{
position:relative;
}
html h2{
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
}
最终效果展示: