當(dāng)前位置:首頁 >  站長(zhǎng) >  編程技術(shù) >  正文

Canvas波浪花環(huán)的示例代碼

 2020-11-18 14:06  來源: 腳本之家   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

這篇文章主要介紹了Canvas波浪花環(huán)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

JS中的Canvas動(dòng)畫

幾天沒寫博客了,今天又忙到很晚,教大家做一個(gè)波浪花環(huán)吧

效果圖如上所示:

老規(guī)矩先把代碼給大家,新建一個(gè)html文檔(新建一個(gè)txt文本文檔,把后綴名改為“ .html

”),以記事本打開,把復(fù)制好的代碼粘貼進(jìn)去,“ 保存 ”,退出,雙擊或右鍵選擇瀏覽器打開。

祝大家前端學(xué)習(xí)愉快,在今后的日子中與君共勉

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body {
     background: #111;
     padding:0;
     margin:0;
   overflow:hidden;
  }
 </style>
</head>
<body>
 <div id="wrapper"></div>
</body>
<script>
(function(){
 'use strict';
 let wrapper, canvas, ctx, width, height,
 Tau=Math.PI*2, PI180=Math.PI/180,
 systems=[];

/* PlanetarySystem */
 let PlanetarySystem = function(id='pSys'){
  Object.defineProperty(this, 'id',               { value:id, writable:true} );
  Object.defineProperty(this, 'x',                { value:0, writable:true });
  Object.defineProperty(this, 'y',                { value:0, writable:true });
  Object.defineProperty(this, 'allBodies',        { value:[], writable:true });
  Object.defineProperty(this, 'allBodiesLookup',  { value:{}, writable:true });    // fast id lookup for children
  Object.defineProperty(this, 'numBodies',        { value:0, writable:true });
 }
 PlanetarySystem.prototype.addBody = function(vo) {
  vo.parentSystem = this;
  vo.parentBody = vo.parentBody === null ? this : this.allBodiesLookup[vo.parentBody];
  let body = new PlanetaryBody(vo);
  body.update();
  this.allBodies.push(body);
  this.allBodiesLookup[vo.id] = body;
  this.numBodies += 1;
 }
 PlanetarySystem.prototype.setSpeedFactor = function(value){
  let body;
  for(let i=0; i<this.numBodies; i++){
   body = this.allBodies[i];
   body.setSpeedFactor(value);
  }
 }
 PlanetarySystem.prototype.update = function(){
  let body;
  for(let i=0; i<this.numBodies; i++){
   body = this.allBodies[i];
   body.update();
  }
 }
/* PlanetaryBody */
 let PlanetaryBody = function(vo){
  Object.defineProperty(this, 'id',     { value:vo.id, writable:true} );
  Object.defineProperty(this, 'diameter',    { value:vo.diameter, writable:true });
  Object.defineProperty(this, 'colour',    { value:vo.colour, writable:true });
  Object.defineProperty(this, 'x',     { value:0, writable:true });
  Object.defineProperty(this, 'y',     { value:0, writable:true });
  Object.defineProperty(this, 'vx',     { value:0, writable:true });
  Object.defineProperty(this, 'vy',     { value:0, writable:true });
  Object.defineProperty(this, 'degrees',    { value:vo.degrees, writable:true });
  Object.defineProperty(this, 'speedBase',   { value:vo.speed, writable:true });
  Object.defineProperty(this, 'speed',    { value:vo.speed , writable:true });
  Object.defineProperty(this, 'orbitalRadius',  { value:vo.orbitalRadius, writable:true });
  Object.defineProperty(this, 'parentSystem',   { value:vo.parentSystem, writable:true });
  Object.defineProperty(this, 'parentBody',   { value:vo.parentBody, writable:true });

  return this;
 }
 PlanetaryBody.prototype.update = function(){
  let angle = this.degrees * PI180;
  this.degrees += this.speed;
  this.vx = this.orbitalRadius * Math.cos(angle);
  this.vy = this.orbitalRadius * Math.sin(angle);
  // update position
  if(this.parentBody != null){
   this.x = this.vx + this.parentBody.x;
   this.y = this.vy + this.parentBody.y;
  }
 }

/* 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>

到此這篇關(guān)于Canvas波浪花環(huán)的示例代碼的文章就介紹到這了,更多相關(guān)Canvas 波浪花環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

來源:腳本之家

鏈接:https://www.jb51.net/html5/741786.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦