学前段好还是后端好 看实例体会

最新推荐文章于 2022-05-25 20:40:58 发布
最新推荐文章于 2022-05-25 20:40:58 发布
阅读量244 收藏
点赞数
文章标签： 运维 后端 前端 ViewUI
原文链接：https://my.oschina.net/u/3388416/blog/878729
版权

学前段好还是后端好？课工场武汉校区的学员们分享项目案例啦，喜欢的朋友快点来看呀，纯canvas实现的绚烂效果，凡是有密集恐惧者请在朋友的陪伴下观看，

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>粒子旋涡</title>

<style>

html, body { margin: 0px; width: 100%;height: 100%; overflow: hidden; background: #000; }

#canvas { position: absolute; width: 100%;height: 100%; }

</style>

</head>

<body>

<canvasid="canvas"></canvas>

<script>

function project3D(x, y, z, vars) {

   var p, d;

    x-= vars.camX;

    y-= vars.camY - 8;

    z-= vars.camZ;

    p= Math.atan2(x, z);

    d= Math.sqrt(x * x + z * z);

    x= Math.sin(p - vars.yaw) * d;

    z= Math.cos(p - vars.yaw) * d;

    p= Math.atan2(y, z);

    d= Math.sqrt(y * y + z * z);

    y= Math.sin(p - vars.pitch) * d;

    z= Math.cos(p - vars.pitch) * d;

   var rx1 = -1000;

   var ry1 = 1;

   var rx2 = 1000;

   var ry2 = 1;

   var rx3 = 0;

   var ry3 = 0;

   var rx4 = x;

   var ry4 = z;

   var uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1);

   var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc;

   var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc;

   if (!z) z = 0.000000001;

   if (ua > 0 && ua < 1 && ub > 0 && ub< 1) {

       return {

           x: vars.cx + (rx1 + ua * (rx2 - rx1)) * vars.scale,

           y: vars.cy + y / z * vars.scale,

           d: (x * x + y * y + z * z)

       }

    }else {

       return {

           d: -1

       }

    }

}

function elevation(x, y, z) {

   var dist = Math.sqrt(x * x + y * y + z * z);

   if (dist && z / dist >= -1 && z / dist <= 1)return Math.acos(z / dist);

   return 0.00000001

}

function rgb(col) {

   col += 0.000001;

   var r = parseInt((0.5 + Math.sin(col) * 0.5) * 16);

   var g = parseInt((0.5 + Math.cos(col) * 0.5) * 16);

    var b = parseInt((0.5 - Math.sin(col) * 0.5)* 16);

   return "#" + r.toString(16) + g.toString(16) + b.toString(16)

}

function interpolateColors(RGB1, RGB2,degree) {

   var w2 = degree;

   var w1 = 1 - w2;

   return [w1 * RGB1[0] + w2 * RGB2[0], w1 * RGB1[1] + w2 * RGB2[1], w1 *RGB1[2] + w2 * RGB2[2]]}

function rgbArray(col) {

   col += 0.000001;

   var r = parseInt((0.5 + Math.sin(col) * 0.5) * 256);

   var g = parseInt((0.5 + Math.cos(col) * 0.5) * 256);

   var b = parseInt((0.5 - Math.sin(col) * 0.5) * 256);

   return [r, g, b]}

function colorString(arr) {

   var r = parseInt(arr[0]);

   var g = parseInt(arr[1]);

   var b = parseInt(arr[2]);

   return "#" + ("0" + r.toString(16)).slice( - 2) +("0" + g.toString(16)).slice( - 2) + ("0" +b.toString(16)).slice( - 2)

}

function process(vars) {

   if (vars.points.length < vars.initParticles) for (var i = 0; i <5; ++i) spawnParticle(vars);

    varp, d, t;

    p= Math.atan2(vars.camX, vars.camZ);

    d= Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);

    d-= Math.sin(vars.frameNo / 80) / 25;

    t= Math.cos(vars.frameNo / 300) / 165;

   vars.camX = Math.sin(p + t) * d;

   vars.camZ = Math.cos(p + t) * d;

   vars.camY = -Math.sin(vars.frameNo / 220) * 15;

   vars.yaw = Math.PI + p + t;

   vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;

   var t;

   for (var i = 0; i < vars.points.length; ++i) {

       x = vars.points[i].x;

       y = vars.points[i].y;

       z = vars.points[i].z;

       d = Math.sqrt(x * x + z * z) / 1.0075;

       t = .1 / (1 + d * d / 5);

       p = Math.atan2(x, z) + t;

       vars.points[i].x = Math.sin(p) * d;

       vars.points[i].z = Math.cos(p) * d;

       vars.points[i].y += vars.points[i].vy * t *((Math.sqrt(vars.distributionRadius) - d) * 2);

       if (vars.points[i].y > vars.vortexHeight / 2 || d < .25) {

           vars.points.splice(i, 1);

           spawnParticle(vars)

       }

    }

}

function drawFloor(vars) {

   var x, y, z, d, point, a;

   for (var i = -25; i <= 25; i += 1) {

       for (var j = -25; j <= 25; j += 1) {

           x = i * 2;

           z = j * 2;

           y = vars.floor;

           d = Math.sqrt(x * x + z * z);

           point = project3D(x, y - d * d / 85, z, vars);

           if (point.d != -1) {

                size = 1 + 15000 / (1 +point.d);

                a = 0.15 - Math.pow(d / 50, 4)* 0.15;

                if (a > 0) {

                    vars.ctx.fillStyle =colorString(interpolateColors(rgbArray(d / 26 - vars.frameNo / 40), [0, 128,32], .5 + Math.sin(d / 6 - vars.frameNo / 8) / 2));

                    vars.ctx.globalAlpha = a;

                    vars.ctx.fillRect(point.x -size / 2, point.y - size / 2, size, size)

                }

           }

       }

    }

   vars.ctx.fillStyle = "#82f";

   for (var i = -25; i <= 25; i += 1) {

       for (var j = -25; j <= 25; j += 1) {

           x = i * 2;

            z = j * 2;

           y = -vars.floor;

           d = Math.sqrt(x * x + z * z);

           point = project3D(x, y + d * d / 85, z, vars);

           if (point.d != -1) {

                size = 1 + 15000 / (1 +point.d);

                a = 0.15 - Math.pow(d / 50, 4)* 0.15;

                if (a > 0) {

                    vars.ctx.fillStyle =colorString(interpolateColors(rgbArray( - d / 26 - vars.frameNo / 40), [32, 0,128], .5 + Math.sin( - d / 6 - vars.frameNo / 8) / 2));

                    vars.ctx.globalAlpha = a;

                    vars.ctx.fillRect(point.x -size / 2, point.y - size / 2, size, size)

                }

           }

       }

    }

}

function sortFunction(a, b) {

   return b.dist - a.dist

}

function draw(vars) {

   vars.ctx.globalAlpha = .15;

   vars.ctx.fillStyle = "#000";

   vars.ctx.fillRect(0, 0, canvas.width, canvas.height);

   drawFloor(vars);

   var point, x, y, z, a;

   for (var i = 0; i < vars.points.length; ++i) {

       x = vars.points[i].x;

       y = vars.points[i].y;

       z = vars.points[i].z;

       point = project3D(x, y, z, vars);

       if (point.d != -1) {

           vars.points[i].dist = point.d;

           size = 1 + vars.points[i].radius / (1 + point.d);

           d = Math.abs(vars.points[i].y);

           a = .8 - Math.pow(d / (vars.vortexHeight / 2), 1000) * .8;

           vars.ctx.globalAlpha = a >= 0 && a <= 1 ? a: 0;

           vars.ctx.fillStyle = rgb(vars.points[i].color);

           if (point.x > -1 && point.x < vars.canvas.width &&point.y > -1 && point.y < vars.canvas.height)vars.ctx.fillRect(point.x - size / 2, point.y - size / 2, size, size)

       }

    }

   vars.points.sort(sortFunction)

}

function spawnParticle(vars) {

   var p, ls;

   pt = {};

    p= Math.PI * 2 * Math.random();

   ls = Math.sqrt(Math.random() * vars.distributionRadius);

   pt.x = Math.sin(p) * ls;

   pt.y = -vars.vortexHeight / 2;

   pt.vy = vars.initV / 20 + Math.random() * vars.initV;

   pt.z = Math.cos(p) * ls;

   pt.radius = 200 + 800 * Math.random();

   pt.color = pt.radius / 1000 + vars.frameNo / 250;

   vars.points.push(pt)

}

function frame(vars) {

   if (vars === undefined) {

       var vars = {};

       vars.canvas = document.querySelector("canvas");

       vars.ctx = vars.canvas.getContext("2d");

       vars.canvas.width = document.body.clientWidth;

       vars.canvas.height = document.body.clientHeight;

       window.addEventListener("resize",

       function() {

           vars.canvas.width = document.body.clientWidth;

           vars.canvas.height = document.body.clientHeight;

           vars.cx = vars.canvas.width / 2;

           vars.cy = vars.canvas.height / 2

       },

       true);

       vars.frameNo = 0;

       vars.camX = 0;

       vars.camY = 0;

       vars.camZ = -14;

       vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;

       vars.yaw = 0;

       vars.cx = vars.canvas.width / 2;

       vars.cy = vars.canvas.height / 2;

       vars.bounding = 10;

       vars.scale = 500;

       vars.floor = 26.5;

       vars.points = [];

       vars.initParticles = 1000;

       vars.initV = .01;

       vars.distributionRadius = 800;

       vars.vortexHeight = 25

    }

   vars.frameNo++;

   requestAnimationFrame(function() {

       frame(vars)

   });

   process(vars);

   draw(vars)

}

frame();</script>

</body>

</html>

t01e82d7ece7f2272a8.jpg

课工场回馈百万奖学金，为你一次性减免千元学费，欢迎加入【Web前端开发交流群036】群号568663768，找群主私聊

转载于:https://my.oschina.net/u/3388416/blog/878729

chenlaojie7596
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
史上最牛代码
08-15
史上最牛代码
一个很牛逼的技术源代码
10-10
适合爱好者下载研究并且留言，关于网游和web方面的东西 。
超强超短的耗资源代码
rainharder的专栏
10-16 1434
刚才在逛论坛，看到个BT需求，想把CPU搞成100%，我想这还不简单，随便想个死循环就成了，进去看看。一看之下还学到了点东西，真是。。。。。。，忘了那句话怎么说了，想起来再补上。 废话少说还是先看代码吧:(){ :|:& };:   别愣，就是上面的，别试，后果自负！！注： { 和:之间的空格不能少，共14个字符 怎么样，没看明白吧，解释一下（顺便说明，解释
超级牛b的一些C#源代码
03-21 382
AVI播放器 http://850306.com.cn/showtopic-164.aspx C#.NET开发日期选择自动义用户控件 http://850306.com.cn/showtopic-165.aspx CD抓轨程序 http://850306.com.cn/showtopic-166.aspx 把 C# 语言开发的控件内嵌在网页里面 http://850306.com.cn/showt
bootstrap-table后端分页功能完整实例
10-15
在实际的 Web 开发中，为了提高性能和减少服务器负担，我们通常会采用后端分页技术，即在服务器端处理数据分页，而不是一次性加载所有数据到前端。本篇文章将详细介绍如何在 Bootstrap Table 中实现后端分页功能。 ...
JS的Ajax与后端交互数据的实例
10-18
1. **创建XMLHttpRequest对象**：在现代浏览器中，可以通过`new XMLHttpRequest()`来创建一个XMLHttpRequest实例。这个对象提供了与服务器通信的方法和属性。 2. **初始化请求**：使用`open()`方法来配置请求。通常...
MVC框架中的前端与后端数据传递及实例
07-05
这段代码会向`/Home/GetData`发送GET请求，期望服务器返回JSON格式的数据。 2. **前端将数据传递给后端** 当前端需要向后端发送数据时，可以使用Ajax的POST请求。例如，更新用户信息可能涉及将新数据打包成JSON...
vuejs前后端数据交互之从后端请求数据的实例
01-19
本文将向大家介绍一种用vue-resource从后端请求数据的方法。 比如说从后端请求一张表过来， （1）首先，在data中return一个msg:[]数组来接收表的数据； （2）在方法中定义一个请求函数，比如我们这里函数名定义为...
@keyframes花瓣动画（代码比较简单，实现炫酷特效）
谢谢你的关注
05-25 410
代码比较简单，实现炫酷特效
简单代码实现跑炫酷马灯效果
07-19
简单实现炫酷的跑马灯，可自定义效果。修改源代码定制
大神项目完整代码
06-07
“大神”项目为个人开发项目，包含了登陆注册，文件资源上传，地图导航等功能，仅供参考，请勿用于商业用途 之前版本犹豫后端服务器未缴费停止了服务，导致前端无用了，现在已经恢复正常，请自行注册和登陆测试！ 随时跟进代码github：https://github.com/devilyouwei/dashen
牛逼的源码
11-12
这是最新的QQ后台喊话器！！！ 很牛逼吧！！！！！ 就来下载吧！！！！
python 如何判断一个函数执行完成_20个python代码，短小精悍，用处无穷
weixin_39850699的博客
11-19 2076
当今python编程语言的潮流已经成为不可阻挡的趋势，python以其较高的可读性和简洁性备受程序员的喜爱。而python编程中的一些小的技巧，运用的恰当，会让你的程序事半功倍。以下的20个小的程序段，看似非常的简单，但是却非常的有技巧性，并且对个人的编程能力是一个很好的检验，大家应该在日常的编程中多多使用，多多练习。这是小编准备的python学习资料，为了你们更好的学习python，关注，转发，...
10个不到500行代码的超牛Python 练手项目
实验楼
12-20 1212
图：内容概览。注：本文内容由实验楼搜集、整理自Github，实际项目版权归原作者所有。以下10个练手项目均摘录自一本尚未出版的 Python 神书《500 Lines o...
C语言牛逼代码
weixin_30519071的博客
10-30 6899
/***** first 表示linux下gcc编译没有过 ****/ #include<stdio.h>int main(void){ float a; printf(" 数据排列\n\n"); printf("input a data:"); scanf("%f", &a); printf("output data is:%-80.5s\n",a); return ...
大神的神级js代码
java小王子的博客
07-09 2488
刚刚在做一个排序的问题，因为后台返回的是一次性返回的，而前台则需要根据类型来分类并且排序，类型也是在后台返回的数据中！ 这样的话，就不好用返回的size来排序，然后尹大神出现了，用以下方法，一次搞定排序问题！    var  indexFlag = {};     //先定义一个数组对象    indexFlag[imgType] = (indexFlag[imgType] == u
老程序员：这是我见过最牛的代码，切勿模仿
管彤python每日分享python技巧
12-27 3609
事情起因很简单：我在全国最大ZZ的同性组织某Hub上浏览时候，发现这样的一条信息： Python 超过 C++、JS 薪酬排行第一 （最大招聘网站Indeed.com数据） 噗，996刚下班的我，当时一口鲜血（老痰）差点没喷出来，又是被Python碾压！这叫我的心态如何不崩？我太愤怒了！你们有这种感觉吗？最后，如果你的时间不是很紧张，并且又想快速的提高，最重要的是不怕吃苦，建议你可以联系尉♥信（同音）：2763177065，那个真的很不错，很多人进步都很快，需要你不怕吃苦哦！大家可以去添加上看一下~ 因为
有趣的超短python代码_有趣的python精短程序
weixin_39575007的博客
12-04 605
python可以简单优美，也很有趣，下面是收集的例子：1.一句话开始一个http的文件服务器:$ python -m SimpleHTTPServerServing HTTP on 0.0.0.0 port 8000 ...在浏览器中就可以http://localhost:8000访问目录及文件了。也可以直接指定端口：$ python -m SimpleHTTPServer 6666如果想在代码中...
前段VUE向后端spring boot传list
最新发布
09-17
### 回答1： 在前端 Vue 中，你可以通过使用 `axios` 库将一个列表发送到后端 Spring Boot 应用。 首先，安装 axios 库： ``` npm install axios ``` 然后，在你的 Vue 组件中，你可以创建一个列表并使用 axios 将其发送到后端： ```javascript import axios from 'axios'; export default { data() { return { list: [1, 2, 3, 4, 5] }; }, methods: { sendList() { axios.post('/api/sendList', { list: this.list }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } }; ``` 在后端 Spring Boot 中，你可以使用以下代码接收这个列表： ```java @RestController public class MyController { @PostMapping("/api/sendList") public List<Integer> receiveList(@RequestBody List<Integer> list) { // do something with the list return list; } } ``` 请注意，这是一个简单的示例，你可以根据自己的需求对代码进行更改。 ### 回答2： 前段VUE向后端Spring Boot传List可以通过以下步骤实现： 1. 在前端VUE中，首先需要创建一个包含多个元素的List。可以使用VUE的数据绑定来实现，即在Vue实例的data属性中定义一个名为list的数组，例如：data: { list: [] }。 2. 在Vue的模板中，可以通过v-for指令对list进行遍历，生成对应的表单输入框或其他组件。例如，使用v-for="item in list" 来遍历list数组，并为每个元素生成一个输入框。 3. 在前端VUE中，绑定每个表单输入框的值到对应的list元素。可以使用v-model指令来实现双向数据绑定。例如，使用v-model="item" 来绑定输入框的值到list中的每个元素。 4. 当需要将list传递给后端Spring Boot时，可以使用Vue的HTTP库（例如axios）发送HTTP请求。可以通过POST或PUT方法将list作为请求的参数发送给后端。例如，使用axios.post(url, list) 方法将list以POST方式发送到指定的URL。 5. 在后端Spring Boot中，可以使用@RequestParam或@RequestBody注解来接收前端传递的list。@RequestParam注解用于接收URL参数，而@RequestBody注解用于接收请求体中的JSON数据。 6. 在后端Spring Boot中，可以将接收到的list进行处理，例如存储到数据库或进行其他操作。可以在Spring Boot的控制器中定义一个接收list参数的方法来处理请求。 总结： 通过以上步骤，前端VUE可以将一个包含多个元素的List通过HTTP请求传递给后端Spring Boot，并在后端进行进一步的处理。关键是实现前端和后端之间的数据传递和双向绑定，以及后端接收数据并进行处理的逻辑。 ### 回答3： 在Vue向后端Spring Boot传递List时，我们可以按照以下步骤进行传递： 1. 在Vue的前端页面中，首先要获取到需要传递的列表数据。可以通过组件的data属性或者通过接口请求获取数据，并将数据存储在一个名为list的数组中。 2. 在Vue的方法中，创建一个POST请求，用于向后端发送数据。可以使用axios库来发送请求。在请求的参数中，将list数组作为一个对象的属性，并设置属性名为data。例如：{data: list}。 3. 使用axios发送POST请求时，需要指定后端的API地址。可以使用`axios.post('/api/endpoint', {data: list})`来发送请求。其中，`/api/endpoint`为后端的API接口地址。 4. 在后端的Spring Boot中，创建一个POST请求的接口来接收来自Vue的数据。在Controller层中使用`@RequestBody`注解将Vue发送过来的数据转换为Java对象。注意，Java的对象需要与Vue发送的对象结构一致，包含与Vue中list数组对应的属性名。 5. 进一步处理后端接收到的List数据，可以进行一些其他操作，例如数据库存储等。 总结：通过上述步骤，Vue可以将list数据传递给后端的Spring Boot。在Vue中，我们需要将list数组作为一个对象的属性，并在发送请求时将该对象传递给后端。在Spring Boot中，我们通过接收Vue发送的数据，并将其转换为Java对象进行后续处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值