源自:8-4 路径方向和剪纸效果
我想在canvas中画一个L型的流动的100个小球,下半部分不知道如何实现了
var me=document.getElementById('me');
me.width=500;
me.height=500;
var tex=me.getContext('2d');
tex.beginPath();
tex.moveTo(100,100);
tex.lineTo(100,300);
tex.lineTo(250,300);
tex.lineTo(250,250);
tex.lineTo(150,250);
tex.lineTo(150,100);
tex.closePath();
tex.stroke();
var aball=[];
for(var i=0;i<1000;i++){
var r=Math.floor(Math.random()*255);
var g=Math.floor(Math.random()*255);
var b=Math.floor(Math.random()*255);
var R=Math.random()*10+5;
ball={
color:'rgb('+r+','+g+','+b+')',
R:R,
x1:Math.random()*50+100,
y1:Math.random()*200+100,
vx1:Math.random()*2+2,
vy1:Math.random()*2+2,
x2:Math.random()*200+150,
y2:Math.random()*50+250,
vx2:Math.random()*3+3,
vy2:Math.random()*3+3
};
aball[i]=ball;
}
function qq() {
tex.clearRect(0, 0, me.width, me.height);
for (var i = 0; i < aball.length; i++) {
/*tex.globalCompositeOperation='lighter';*/
tex.beginPath();
tex.arc(aball[i].x1, aball[i].y1, aball[i].R, 0, 2 * Math.PI);
tex.closePath();
tex.fillStyle = aball[i].color;
tex.fill();
}
}
setInterval(function () {
qq();
move();
},20);
function move() {
for (var i = 0; i < aball.length; i++) {
aball[i].x1 += aball[i].vx1;
aball[i].y1 += aball[i].vy1;
if (aball[i].x1 - aball[i].R <= 100) {
aball[i].vx1 = -aball[i].vx1;
aball[i].x1 = 100 + aball[i].R;
}
if (aball[i].x1 + aball[i].R >= 150) {
aball[i].vx1 = -aball[i].vx1;
aball[i].x1 = 150 - aball[i].R;
}
if(aball[i].x1+aball[i].R>=150||aball[i].y1-aball[i].R>=250){
aball[i].x1 += aball[i].vx1;
aball[i].y1 += aball[i].vy1;
}
/*else {
aball[i].vx1 = -aball[i].vx1;
aball[i].x1 = 150 - aball[i].R;
}*/
/*if(aball[i].x1+aball[i].R>=250){
aball[i].vx1=-aball[i].vx1;
aball[i].x1=250-aball[i].R;
}*/
/*if(aball[i].y1-aball[i].R>=250){
aball[i].vy1=-aball[i].vy1;
aball[i].vy1=250-aball[i].R;
}*/
if (aball[i].y1 - aball[i].R <= 100) {
aball[i].vy1 = -aball[i].vy1;
aball[i].y1 = 100 + aball[i].R;
}
if (aball[i].y1 + aball[i].R >= 300) {
aball[i].vy1 = -aball[i].vy1;
aball[i].y1 = 300 - aball[i].R;
}
}
}
提问者:慕粉1470305008
2018-05-31 23:28