android贝塞尔曲线多点,Canvas 贝塞尔曲线的多点波动
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
function Ball(x, y, radius) {
this.x = x;
this.y = y;
this.radius = radius;
this.vx = 20;
this.vy = 10;
}
Ball.prototype.draw = function(ctx) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
ctx.beginPath();
ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true);
ctx.fill();
ctx.restore();
}
function Curve(points) {
this.points = points;
this.ballRadius = 5;
this.speed = 0.12;
this.vy = 2 + Math.random() * 2;
}
Curve.prototype.draw = function() {
var length = this.points.length - 2,
ctrlPoint = {},
i;
ctx.save();
ctx.beginPath();
ctx.moveTo(this.points[0].x, this.points[0].y);
for (i = 1; i < length; i++) {
ctrlPoint.x = (this.points[i].x + this.points[i + 1].x) / 2;
ctrlPoint.y = (this.points[i].y + this.points[i + 1].y) / 2;
ctx.quadraticCurveTo(this.points[i].x, this.points[i].y, ctrlPoint.x, ctrlPoint.y);
}
ctx.quadraticCurveTo(this.points[i].x, this.points[i].y, this.points[i + 1].x, this.points[i + 1].y);
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.strokeStyle = '#fff';
ctx.stroke();
ctx.restore();
}
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d'),
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
limit = W / 2.2,
horizontalBall = new Ball(100, H / 2, 100),
curves = [];
for (var y = H / 2 - 150; y <= H / 2 + 150; y += 50) {
makeCurve(y)
}
function makeCurve(y) {
var curve, points = [];
for (var x = W / 2 - limit; x <= W / 2 + limit; x += 100) {
points.push({
x: x,
y: y,
oldY: y,
targetY: y - 300 + Math.random() * 600,
speed: 0.1,
vy: 5 + Math.random() * 5,
gravity: 0.85,
vyy: 3 + Math.random() * 4
});
}
curve = new Curve(points);
curves.push(curve)
}
function moveBalls(ball) {
if (ball == horizontalBall) {
if (ball.x + ball.radius > W) {
ball.x = W - ball.radius - 50;
ball.vx *= -1;
} else if (ball.x - ball.radius < 0) {
ball.x = 50 + ball.radius;
ball.vx *= -1;
}
ball.x += ball.vx;
}
}
(function drawFrame() {
requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle = '#17293a';
ctx.fillRect(0, 0, W, H);
curves.forEach(function(curve) {
curve.points.forEach(function(point) {
var dx, dy, dist,
dx2, dy2, dist2,
n = curve.points.indexOf(point);
dx = (horizontalBall.x - point.x);
dy = (horizontalBall.y - point.y);
dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 200) {
if (n % 2 === 0) {
point.y -= point.vyy;
} else if (n % 2 !== 0) {
point.y += point.vyy;
}
} else {
point.vy += (point.oldY - point.y) * point.speed;
point.vy *= point.gravity;
point.y += point.vy;
}
});
curve.draw(ctx);
});
moveBalls(horizontalBall);
}());
android贝塞尔曲线多点,Canvas 贝塞尔曲线的多点波动相关推荐
- android path基本使用以及贝塞尔曲线入门
今天周一,产品要求版本迭代到1.5.3,发现需求没啥东西,后台暂时也给不了数据,于是又有时间写博客了,这是我很喜欢的模式,今天讲下path的基本使用以及贝塞尔曲线入门,后期会讲些贝塞尔曲线结合动画的效 ...
- canvas贝塞尔曲线爱心_canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
写在最前 由于原生的Canvas最高只支持到三阶贝塞尔曲线,那么我想添加多个控制点怎么办呢?(即便大部分复杂曲线都可以用3阶贝塞尔来模拟)与此同时,关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控 ...
- Canvas贝塞尔曲线和二次贝塞尔曲线
贝塞尔曲线和二次曲线 贝塞尔曲线大概就是ps中钢笔工具那个曲线 quadraticCurveTo(cp1x, cp1y, x, y) 从当前笔位置到由指定的结束点绘制的二次贝塞尔曲线x,并y使用由指定 ...
- html5贝塞尔曲线,用canvas绘制一个曲线动画——深入理解贝塞尔曲线
前言 在前端开发中,贝赛尔曲线无处不在: 它可以用来绘制曲线,在svg和canvas中,原生提供的曲线绘制都是使用贝赛尔曲线 它也可以用来描述一个缓动算法,设置css的transition-timin ...
- canvas贝塞尔曲线爱心_Canvas学习:贝塞尔曲线
在绘制圆和圆弧一节中,了解到在Canvas中可以使用arc()和arcTo()绘制制圆或弧线,但很多时候,仅这两个方法还不能满足我们实际的需求,特别是绘制复杂的曲线.不过值得庆幸的是,在Canvas中 ...
- 【Android UI】贝塞尔曲线 ② ( 二阶贝塞尔曲线公式 | 三阶贝塞尔曲线及公式 | 高阶贝塞尔曲线 )
文章目录 一.二阶贝塞尔曲线公式 二.三阶贝塞尔曲线 三.高阶贝塞尔曲线 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.二阶贝塞尔曲线公式 二 ...
- 【Android UI】贝塞尔曲线 ⑥ ( 贝塞尔曲线递归算法原理 | 贝塞尔曲线递归算法实现 )
文章目录 一.贝塞尔曲线递归算法 二.贝塞尔曲线递归算法实现 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.贝塞尔曲线递归算法 一阶贝塞尔曲线 ...
- matlab 贝塞尔曲线,matlab实现贝塞尔曲线绘图pdf查看
贝塞尔曲线绘图方法: %Program 3.7 Freehand Draw Program Using Bezier Splines %Click in Matlab figure window to ...
- python如何画贝塞尔曲线_初识贝塞尔曲线
贝塞尔曲线在CSS动画中和canvas.svg绘图中都是比较重要的一个东西!所以我来好好的小结一下关于它的一些东西. 什么是贝塞尔曲线 贝塞尔曲线于1962,由法国工程师皮埃尔·贝塞尔(Pierre ...
最新文章
- MarkDown页面添加锚点,跳转到本页指定位置
- java string返回_Java的String字符串内容总结
- 动态路由协议_动态路由协议的类别
- Mac 下iterm2配色方案(高亮)及显示分支
- 大漠插件dm7.2149
- 基于matlab的声波分析研究,基于MATLAB的声音信号分析与处理(共13页)
- uniapp实现苹果支付流程
- 苹果6p计算机在哪里设置方法,苹果手机怎么设置铃声【图文教程,不用电脑,1分钟完成】...
- xp进入win7计算机要密码怎么设置密码,XP系统设置直接跳过密码的多种方法
- 2022 年牛客多校第四场补题记录
- PPO近端策略优化算法概述
- 你的项目刚刚启动?是时候考虑Globalization了! 1
- GoodNotes 模板分享
- linux的exit和_exit
- 2-1、特征:特征选择、特征预处理(缩放)、特征抽取、特征构造
- php token验证例子,phptoken使用与验证示例【测试可用】[原创]
- 基于西门子PLC的自动门控制装置设计
- Java毕业设计-社区诊所管理系统
- 股​票​投​资​5​0​本​经​典​书​籍
- linux安装 msf,Centos下安装msf
热门文章
- potplayer 多个进程_创建守护进程的步骤
- 用c语言绘制自定义图形,Android使用自定义View绘图
- 7读不出来卡显示无服务器,win7识别不了网络如何解决_win7显示未识别网络的处理方法...
- java逻辑量_java – 增量逻辑
- VS Code Git 日常操作
- ThreadPoolExecutor中的keepAliveTime详解
- 查看Centos7 系统位数
- 3. 什么是icmp?icmp与ip的关系_月入3万的大龄剩女相亲被拒:如果余生是你,晚一点有什么关系...
- php程序怎么上传服务器,php本地文件上传到远程服务器
- linux emacs命令,Linux Bash Shell 终端 Terminal Emacs 模式 常用 快捷键 命令