使用Canvas怎么绘制一个波浪花环
短信预约 -IT技能 免费直播动态提醒
使用Canvas怎么绘制一个波浪花环？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
<!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=[];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 childrenObject.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();}}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 positionif(this.parentBody != null){this.x = this.vx + this.parentBody.x;this.y = this.vy + this.parentBody.y;}}function init(){wrapper = document.querySelector('#wrapper');canvas = createCanvas('canvas', width, height);wrapper.appendChild(canvas);ctx = canvas.getContext('2d');setupEvents();resizeCanvas();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'});}}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怎么绘制一个波浪花环问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网行业资讯频道了解更多相关知识。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
