canvas心形水波(Canvas波浪花环的示例代码)
类别:Web前端 浏览量:1111
时间:2021-10-22 07:20:29 canvas心形水波
Canvas波浪花环的示例代码JS中的Canvas动画
几天没写博客了,今天又忙到很晚,教大家做一个波浪花环吧
效果图如上所示:
老规矩先把代码给大家,新建一个html文档(新建一个txt文本文档,把后缀名改为“ .html
”),以记事本打开,把复制好的代码粘贴进去,“ 保存 ”,退出,双击或右键选择浏览器打开。
祝大家前端学习愉快,在今后的日子中与君共勉
<!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> <li id="wrapper"></li> </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>
到此这篇关于Canvas波浪花环的示例代码的文章就介绍到这了,更多相关Canvas 波浪花环内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas如何在网页上画图形(canvas绘制图片drawImage使用方法)
- canvas技术开发(用canvas显示验证码的实现)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- canvas 动画线段(canvas简单连线动画的实现代码)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- canvas绘图白屏或者元素有缺失(高清屏中使用Canvas绘图出现模糊的问题及解决方法)
- 如何使用html5的canvas图(html5 canvas实现给图片添加平铺水印)
- canvas绘制流星(使用canvas实现黑客帝国数字雨效果)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas 中文字体(详解canvas绘制网络字体几种方法)
- canvas指定区域生成图片(canvas实现图片镜像翻转的2种方式)
- canvas俄罗斯方块(JavaScript canvas实现俄罗斯方块游戏)
- 网坛停摆三巨头亏损惨重,费德勒跌幅88 纳达少赚2400万(网坛停摆三巨头亏损惨重)
- Beyond 版本《无人深空》主线任务攻略 阿特拉斯之道(版本无人深空主线任务攻略)
- 全球科技界最有钱大佬TOP 15 你知道几位(全球科技界最有钱大佬TOP)
- 2主力后腰缺阵 泰山队奇兵有望获重用,赛季0出场,迎来中超首秀(泰山队奇兵有望获重用)
- 三分71 生死战爆发 篮网旧将丁威迪今天成奇兵,助队赢球(三分71生死战爆发)
- 《红 雄安》系列广播剧第一集 水上奇兵雁翎队(雄安系列广播剧第一集)
热门推荐
- css选择器一般写多少(深入理解CSS选择器优先级)
- 史上最全的css布局教程(详解CSS经典布局之Sticky footer布局)
- html5炫酷代码(HTML5实现视频弹幕功能)
- 阿里云注册域名ddns怎么写(如何通过阿里云实现动态域名解析DDNS的方法)
- 阿里云跟腾讯云的对比(阿里云、腾讯云的恩怨情仇)
- sql中row的用法(sql server数据库中raiserror函数用法的详细介绍)
- vue3.0 自定义组件(Vue 3.0自定义指令的使用入门)
- mysql慢日志查询作用(MySQL 慢查询日志的开启与配置)
- qos实现限速(apche 多端口配置及网站指向非apche默认的网站文件夹设置方法)
- django settings配置(Django重置migrations文件的方法步骤)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9