Canvas波浪花环的示例代码

/* init() */
 function init(){
  wrapper = document.querySelector('#wrapper');
  canvas = createCanvas('canvas', width, height);
  wrapper.appendChild(canvas);
  ctx = canvas.getContext('2d');
  setupEvents();
  resizeCanvas();

/* Define new PlanetarySystem and set values */
  let system1 = new PlanetarySystem('pSys1');
  systems.push(system1);
  system1.x = width * .5;
  system1.y = height * .5;
  system1.addBody({id:'sun', diameter:5, degrees:0, speed:0, colour:'#FDFE1D', orbitalRadius:0, parentBody:null});
  for(let loop=30, i=0; i<loop; i+=1){
   system1.addBody({ id:    'ball'+i,
        diameter:  5,
        degrees:  0,
        speed:   2 + (loop * 0.15) - (i* 0.2),
        colour:   '#FDFE1D',
        orbitalRadius: 7*(i+1),
        parentBody:  'sun'});
  }
 }
 
/* Methods */
 function createCanvas(id, w, h){
  let tCanvas = document.createElement('canvas');
  tCanvas.width = w;
  tCanvas.height = h;
  tCanvas.id = id;
  return tCanvas;
 }

function setupEvents(){
  window.onresize = resizeCanvas;
 }
 function resizeCanvas(){
  let rect = wrapper.getBoundingClientRect();
  width = window.innerWidth;
  height = window.innerHeight - rect.top -2;
  canvas.width = width;
  canvas.height = height;
  for(let i=0; i<systems.length; i++){
   systems[i].x = width * .5;
   systems[i].y = height * .5;
  }
 }

function update(){
  for(let loop=systems.length, i=0; i<loop; i++){
   systems[i].update();
  }
 }

function draw(){
  let system;
  let prev = null;
  for(let i=0; i<systems.length; i++){
   system = systems[i];
   let planetaryBody;
   for(let loop=system.numBodies, j=1; j<loop; j+=1) {
    planetaryBody = system.allBodies[j];
    ctx.beginPath();
    ctx.arc(planetaryBody.x, planetaryBody.y, planetaryBody.diameter, 0, Tau, false);
    ctx.fillStyle = planetaryBody.colour;
    ctx.fill();
    if(j>1){
     ctx.strokeStyle = planetaryBody.colour;
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(planetaryBody.x, planetaryBody.y);
     ctx.lineTo(prev.x, prev.y);
     ctx.stroke();
    }
    prev = {x:planetaryBody.x, y:planetaryBody.y};
   }
  }
 }

function animate(){
  ctx.fillStyle = 'rgba(0,0,0, .05)';
  ctx.fillRect(0, 0, width, height);
  update();
  draw();
  requestAnimationFrame(animate);
 }
 init();
 animate();
}());
</script>
</html>

到此这篇关于Canvas波浪花环的示例代码的文章就介绍到这了,更多相关Canvas 波浪花环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：宣城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!