前端 流星特效_前端工程师流星

前端 流星特效

As part of my daily web browsing routine, I follow a number of front-end blogs. I'm always amazed at how far good front-end engineers can push JavaScript and CSS, and how well they are able to master the intricacies of web browsers.

作为日常Web浏览例程的一部分,我关注了许多前端博客。 我一直对优秀的前端工程师能够将JavaScript和CSS推入多高的水平,以及他们能够熟练掌握复杂的Web浏览器感到惊讶。

Yet I also can't help but notice that a lot of front-end developers seem to limit themselves to, well, the front-end.

但是我也忍不住注意到许多前端开发人员似乎将自己限制在前端。

从前到后 (Front to Back)

On one hand this makes sense. With new JavaScript frameworks and browser versions popping up every day, client-side development already offers more than enough to keep you occupied for a lifetime.

一方面,这是有道理的。 随着每天出现新JavaScript框架和浏览器版本,客户端开发已经提供了足够多的资源,可让您终身受益。

Yet the fact remains that it's often hard to build functional web apps without involving a back-end environment at some point, if only to communicate with a database.

然而,事实仍然是,即使仅与数据库通信,要在某个时候不涉及后端环境的情况下构建功能强大的Web应用程序通常很困难。

Up to now, adding a back-end to your app meant learning a back-end language such as Ruby, Python, or PHP. And that new environment came with its own set of patterns and quirks that had to be learnt from scratch.

到目前为止,在您的应用程序中添加后端意味着学习诸如Ruby,Python或PHP之类的后端语言。 而且,这种新环境带有它自己的一套模式和怪癖,必须从头开始学习。

But things are changing. Node.js introduced JavaScript on the server, and for the first time developers could code their whole app in a single language.

但是情况正在改变。 Node.js在服务器上引入了JavaScript,并且开发人员第一次可以用一种语言编写整个应用程序。

Meanwhile, backend-as-a-service offerings like Parse and Firebase now make it possible to add persistent data to an app with little more than a few lines of JavaScript.

同时,像Parse和Firebase这样的后端即服务产品现在使使用几行JavaScript即可向应用程序添加持久数据成为可能。

But to day I'd like to talk about yet a third approach: Meteor, an up-and-coming JavaScript framework that bridges the gap between client and server.

但是今天,我想谈谈第三种方法: Meteor ,这是一个新兴JavaScript框架,它弥合了客户端和服务器之间的鸿沟。

I discovered Meteor about one year ago, and quickly fell in love. I went on to build a popular open-source app with it, used that app to power a very successful project of mine, and ended up writing a book about it!

大约一年前,我发现了流星,并很快坠入爱河。 我继续使用它构建了一个流行的开源应用程序 ,并使用该应用程序为我的一个非常成功的项目提供了动力,最后写了一本关于它的书

Meteor might still be quite new, but I think a lot of front-end engineers and designers would quickly fall

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在前端实现流星迎面飞来的效果,可以使用 HTML5 的 canvas 元素和 JavaScript 实现。 首先,需要在页面中创建一个 canvas 元素: ```html <canvas id="canvas"></canvas> ``` 然后,在 JavaScript 中获取 canvas 元素,并设置它的宽度和高度为浏览器窗口的宽度和高度: ```javascript var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ``` 接着,定义一个 Meteor(流星)类,用于生成随机位置和速度的流星: ```javascript function Meteor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.speed = Math.random() * 10 + 5; } ``` 然后,定义一个 drawMeteor(绘制流星)函数,用于绘制流星: ```javascript function drawMeteor(meteor) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(meteor.x, meteor.y); ctx.lineTo(meteor.x - 5, meteor.y + 20); ctx.lineTo(meteor.x + 5, meteor.y + 20); ctx.closePath(); ctx.fillStyle = "#fff"; ctx.fill(); } ``` 最后,定义一个 animate(动画)函数,用于在 canvas 中不断绘制流星,并让它们向下飞行: ```javascript function animate() { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < meteors.length; i++) { drawMeteor(meteors[i]); meteors[i].y += meteors[i].speed; // 如果流星超出了屏幕,则重新生成一个随机位置和速度的流星 if (meteors[i].y > canvas.height) { meteors[i] = new Meteor(); } } requestAnimationFrame(animate); } ``` 完整代码如下: ```html <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; function Meteor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.speed = Math.random() * 10 + 5; } function drawMeteor(meteor) { var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(meteor.x, meteor.y); ctx.lineTo(meteor.x - 5, meteor.y + 20); ctx.lineTo(meteor.x + 5, meteor.y + 20); ctx.closePath(); ctx.fillStyle = "#fff"; ctx.fill(); } var meteors = []; for (var i = 0; i < 10; i++) { meteors.push(new Meteor()); } function animate() { var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < meteors.length; i++) { drawMeteor(meteors[i]); meteors[i].y += meteors[i].speed; if (meteors[i].y > canvas.height) { meteors[i] = new Meteor(); } } requestAnimationFrame(animate); } animate(); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值