我想在canvas中画一个L型的流动的100个小球,下半部分不知道如何实现了

来源:8-4 路径方向和剪纸效果

慕粉1470305008

2018-05-31 23:28

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;
          }
      }
  }


写回答 关注

0回答

还没有人回答问题,可以看看其他问题

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72974 学习 · 426 问题

查看课程

相似问题