html中的波浪线,CSS3 波浪线
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
// --------------------------
var app;
var fK;
var width, height, prevTime;
var halfWidth, halfHeight;
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
width = window.innerWidth;
height = window.innerHeight;
halfWidth = width / 2;
halfHeight = height / 2;
canvas.width = width;
canvas.height = height;
// ================
fK = 0.25;
var widthNum = 31;
var Point = function(){
};
Point.prototype = {
x : null,
y : null,
vel: 0,
mass : 10,
setPosY : function(value){
this.y = this.baseYPos = value;
}
};
var SmallCircle = function(){
};
SmallCircle.prototype = {
};
var MainShape = function(){
this.points = [];
var gapDistance = (width) / (this.pointNumber - 1);
var xPos;
var i;
for(i = 0; i < this.pointNumber; i++){
xPos = gapDistance * i;
var myPt = new Point();
myPt.x = xPos;
myPt.setPosY(0);
//myPt.y = 0;
this.points.push( myPt );i
}
this.particleSprings = [];
for(i = 0; i < this.pointNumber - 1; i++){
var spring = {iLengthY: this.points[i + 1].y - this.points[i].y };
this.particleSprings.push( spring );
}
//this.points[this.points.length - 1].y = 200;
};
/*
this.mcParticles[i].fXPos= this.mcParticles[i]._x;
this.mcParticles[i].fYAccel= 0;
this.mcParticles[i].fYVel= 0;
this.mcParticles[i].fYPos= this.mcParticles[i]._y;
this.mcParticles[i].fBaseYPos= this.mcParticles[i]._y;
this.mcParticles[i].iMass = 10;
*/
MainShape.prototype = {
pointNumber : widthNum,
particleSprings : [],
x : 0,
y : 0,
col : "#fff",
update : function(){
// calculation
var i;
for( i = 0; i < this.points.length; i++){
var fExtensionY = 0;
var fForceY = 0;
if(i > 0){
fExtensionY = this.points[i - 1].y - this.points[i].y - this.particleSprings[i-1].iLengthY;
fForceY += - fK * fExtensionY;
}
if( i < this.points.length - 1){
fExtensionY = this.points[i].y - this.points[i+1].y - this.particleSprings[i].iLengthY;
fForceY += fK * fExtensionY;
}
fExtensionY = this.points[i].y - this.points[i].baseYPos;
fForceY += fK/20 * fExtensionY;
this.points[i].acl = - fForceY;
this.points[i].vel += this.points[i].acl;
this.points[i].y += this.points[i].vel;
this.points[i].y += 0.2 * (this.points[i].baseYPos - this.points[i].y);
this.points[i].vel /= 1.2;
}
// ================
ctx.save();
ctx.translate(this.x, this.y);
ctx.beginPath();
ctx.lineWidth = 2;
/**
for( i = 0; i < this.pointNumber; i++){
if(i == 0) ctx.moveTo(this.points[i].x, this.points[i].y);
else ctx.lineTo(this.points[i].x, this.points[i].y);
}**/
for(i = 0; i < this.pointNumber- 1; i++ ){
var xPos = (this.points[i].x + this.points[i + 1].x)/2;
var yPos = (this.points[i].y + this.points[i + 1].y)/2;
if(i == 0) ctx.moveTo(xPos, yPos);
else ctx.quadraticCurveTo( this.points[i].x, this.points[i].y, xPos, yPos);
}
//ctx.closePath();
ctx.strokeStyle = this.col;
ctx.stroke();
ctx.restore();
},
setCircle : function(xPos, yPos){
for(var i = 0; i < this.points.length; i++){
var dx = xPos - this.x - this.points[i].x;
var dy = yPos - this.y - this.points[i].y;
var dis = Math.sqrt(dx * dx + dy * dy);
if(dis < 60){
this.points[i].y += 40;
}
}
},
addImpulse : function(){
//this.points[parseInt(this.points.length/2)].vel = .1;
}
};
var App = function(){
var kankakuHeight = 50;
var kankakuHeightNum = parseInt(height/kankakuHeight) ;
// createCircle
// width: widthNum \\ height: kankakuHeightNum
for(var i = 0; i < kankakuHeightNum; i++){
var mainShape = new MainShape();
mainShape.y = kankakuHeight * (i + 1);
this.mainShapeArr.push(mainShape);
}
};
App.prototype = {
mainShapeArr : [],
bgCol : "#333",
update : function(){
ctx.fillStyle = this.bgCol;
ctx.fillRect(0, 0, width, height);
this.mainShapeArr.forEach(function(element){
element.update();
});
},
xPos : 60,
yPos : 60,
kigoHeight : +1,
kigoWidth : + 1,
num : 12,
rad : 60,
addImpulse : function(){
this.yPos += this.kigoHeight * 50; //= (this.yPos + 50) % height;
if(this.yPos > height ) {
this.yPos = height;
this.kigoHeight = -1;
}
if(this.yPos < 0) {
this.yPos = 0;
this.kigoHeight = 1;
}
this.xPos += this.kigoWidth * 50;
if(this.xPos > width) {
this.xPos = width;
this.kigoWidth = -1;
}
if(this.xPos < 0) {
this.xPos = 0;
this.kigoWidth = 1;
}
for(var i = 0; i < this.num; i++){
var xPos = this.rad * Math.cos(2 * Math.PI * i / this.num) + width/2;
var yPos = this.rad * Math.sin(2 * Math.PI * i / this.num) + this.yPos;
// xPos, yPos
for(var jj = 0; jj < this.mainShapeArr.length; jj++){
this.mainShapeArr[jj].setCircle(xPos, yPos);
}
//
var xPos = this.rad * Math.cos(2 * Math.PI * i / this.num) + this.xPos;
var yPos = this.rad * Math.sin(2 * Math.PI * i / this.num) + height/2;
// xPos, yPos
for(var jj = 0; jj < this.mainShapeArr.length; jj++){
this.mainShapeArr[jj].setCircle(xPos, yPos);
}
}
}
};
// ================
init();
loop();
function init(){
app = new App();
timer();
}
function timer(){
app.addImpulse();
setTimeout(timer, 100);
}
function loop(){
app.update();
requestAnimationFrame(loop);
//setTimeout(loop, 1000);
}
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
html中的波浪线,CSS3 波浪线相关推荐
- 去除VisualStudio中拼写错误检测的红色波浪线
去除VisualStudio中拼写错误检测的红色波浪线 在Visual Assistant中将 Underline spelling errors in comments and strings us ...
- 波浪下划线怎么设置_如何在word中的文字下面加波浪线
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:如何在word中的文字下面加波浪线?并让波浪线起伏大些?回答:要更大的波浪线怕只能用"入"图片了:入图片--绘制 ...
- 是否还被word中各种下划线、波浪线困扰,来看这里(Word中拼写语法错误)
是否还被word中各种下划线.波浪线困扰,来看这里!其实是被word中自带的校验功能所干扰,不能起全身心投入. 一.对于英文 根据提示进行修改足以.如果单词为组合词或者缩略语,需要使用但出现错误提示, ...
- Latex中在字母上加上波浪线
前言 本文介绍Latex的两种方法,在字母之上画出波浪线. 方法 1.\tilde{-} 2.\widetilde{-} 以下是这两种方法的对比: $\tilde{A_2}$ vs $\widetil ...
- Word文档中的文字下红色波浪线如何取消?
大家在编辑word文档的时候避免不了要输入一些英文,但是经常会在英文下有红色波浪线,有些中文字下也有可能会出现红色波浪线.那么我们如何解决这种情况? 第一种方法就是我们选中带有红色波浪线的单词,点击鼠 ...
- latex 波浪线_波浪理论4浪调整,喊单平台的带单老师精准分析,15连胜!
绝密:80%胜率的波浪理论技法,交易股票.期货图解视频↓↓ 波浪理论4浪调整 波动理论:市场价格以重复且可识别的模式波动和反转.这种模式在市场价格数据中反复出现,这种现象称为波动理论.波浪理论4浪调整 ...
- css3波浪动画特效
css3波浪动画特效 可根据需求添加修改波浪线和背景颜色 全部代码如下 <!doctype html> <html> <head> <meta charset ...
- 202203 word中的表格 实现 外框线粗 内部线细
被自己蠢爆了,研究了好久,终于搞出来了 word中的表格 实现 外框线粗内部线细 先在word中选中单元格 右击–边框和底纹 1 边框选项卡-方框 (表示上下左右),把宽度设置成 1磅,然后可以先确定 ...
- 前端必学的CSS3波浪效果演示
目录 文章目录 前言 CSS3波浪效果 1.Html构建 2.CSS编写 3.完整代码 index.html文件 style.css文件 总结 前言 随着前端技术的不断发展与进步,界面交互的样式要求和 ...
最新文章
- 安装SQL2012 提示 setup account privileges Failed 解决办法
- c 语言教程文档,c语言基本教程
- 安卓3D游戏-神奇宝贝防御战
- Exchange2010 SP1部署边缘服务器
- Nginx + FastCGI架构部署指导
- elasticsearch的java搜索语法
- 苹果Mac强大的网络流量分析工具:Debookee
- 动态规划相关知识点总结
- [BZOJ1594] [Usaco2008 Jan]猜数游戏(二分 + 并查集)
- java安装包_java JDK安装包的获取与安装
- 编译环境 Golang开发环境 vscode+git
- web前端顶岗实习总结报告_实习报告-web前端实习报告范文三篇 精品
- u盘启动盘制作工具多个linux,多系统U盘启动盘制作工具
- iOS 动画(基于Lottie封装)
- 哥伦比亚大学 Schulzrinne 教授:撰写科研论文详细教程
- java 天气api_基于JAVA的免费天气预报接口查询
- R语言使用cor函数计算dataframe中多个数值数据列之间的相关性系数、计算spearman非参数的等级相关性系数
- Mockito开发指南
- linux中有一个备份程序,技术|SBackup: 一个Linux下的简单备份软件
- linux之下载工具那些事
热门文章
- 一文看懂高可用:异地多活
- 金融科技:中国农行研发中心DevOps规划与实践
- MATLAB GPU加速
- Java多线程——重入锁ReentrantLock源码阅读
- Java面向对象练习题之学生信息
- Linux基础1之磁盘与分区
- 转债---Pregel: A System for Large-Scale Graph Processing(译)
- 非使用FindControl方法找到深层嵌套的控件
- 根据当前日期返回星期数
- (1)定义接口A,里面包含值为3.14的常量PI和抽象方法double area()。 (2)定义接口B,里面包含抽象方法void setColor(String c)。