html5开花动画效果代码,HTML5 Canvas藤曼系植物生长开花动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
class Line {
constructor(x, y, a) {
this.x = x;
this.y = y;
this.ang = a;
this.angVel = 0;
this.angAcc = 0.4;
}
anim() {
ctx.moveTo(this.x, this.y + 1);
this.x += 6 * Math.cos(this.ang);
this.y += 6 * Math.sin(this.ang);
this.angVel += 0.2 * (Math.random() - Math.random());
this.angVel *= this.angAcc;
this.ang += this.angVel;
if (Math.random() > 0.98) {
if (this.angAcc === 0.4) this.angAcc = 0.98;
else this.angAcc = 0.4;
}
ctx.lineTo(this.x, this.y);
if (Math.random() > 0.96 && numLines < 20) {
lines.add(new Line(width / 2, height, -Math.PI / 2));
numLines++;
}
if (this.x < -20 || this.x > width + 20 || this.y > height || this.y < 30) {
if (numLines > 1) {
numLines--;
lines.delete(this);
ctx.beginPath();
for (let i = 0; i < 2 * Math.PI; i += 0.314) {
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x + (5 * Math.random() + 12) * Math.cos(i), this.y + (5 * Math.random() + 12) * Math.sin(i));
}
ctx.stroke();
}
}
}
}
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
const width = canvas.width = canvas.offsetWidth * 1;
const height = canvas.height = canvas.offsetHeight * 1;
ctx.strokeStyle = "#654";
const lines = new Set();
let numLines = 0;
let y = 0;
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, width, height);
lines.add(new Line(width / 2, height, -Math.PI / 2));
function run() {
requestAnimationFrame(run);
ctx.drawImage(canvas, 0, 1);
for (let line of lines) {
ctx.beginPath();
line.anim();
ctx.stroke();
}
}
run();
html5开花动画效果代码,HTML5 Canvas藤曼系植物生长开花动画相关推荐
- html制作图片动画效果代码,HTML5 Canvas:制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...
- html小人动画效果代码,使用CSS3各个属性实现小人的动画实例代码
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: 练习一个小人的动画 I ♥ Y O U ♫ ♪ CSS代码如下: ...
- jQuery酷炫的文字动画效果代码
jquery css3文字动画特效点击切换文字动态效果 jquery文字动画特效制作淡出淡进文字轮播动画效果代码 jquery文字提示点击按钮触发文字变大消失动画效果 jquery点击按钮淡出淡进动画 ...
- css3 动画图片滚动条,CSS3实现滚动条动画效果代码分享
一团网资讯 一团资讯 > css3 > CSS3实现滚动条动画效果代码分享 CSS3实现滚动条动画效果代码分享 2018-05-01 08:57:16 发布者:来源网络 先给大家一 ...
- css手指点击样式,CSS3-通过 Animation实现手指点击动画效果代码
CSS3-通过 Animation实现手指点击动画效果代码 html代码: css代码.wrapper { /* position: absolute; top: 50%; left: 50%; */ ...
- android淡入淡出动画循环,Android应用开发之淡入淡出、缩放、旋转、平移、组合动画效果代码实现...
本文将带你了解Android应用开发Android动画开发之淡入淡出.缩放.旋转.平移.组合动画效果代码实现,希望本文对大家学Android有所帮助. 1.activity_main.xml文件 an ...
- html5 图片弹跳,html5 canvas画布里面圆球弹跳动画效果代码
特效描述:html5 canvas 画布 圆球弹跳动画.html5 跳动的球体 代码结构 1. HTML代码 Untitled Document body { margin: 0px; } var i ...
- html5 css动画效果代码,超酷震撼 8个HTML5/CSS3动画应用及源码
原标题:超酷震撼 8个HTML5/CSS3动画应用及源码 HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼 ...
- html代码特效粒子,html5彩色方块粒子动画效果代码
特效描述:html5 彩色方块 粒子动画效果.粒子动画 代码结构 1. HTML代码 var df = document.createDocumentFragment(); var container ...
最新文章
- python swapcase用法_Python swapcase函数有什么用
- !--处理:借款冲销不自动冲减预算--
- 类型名称了解typename的双重意义
- 李洪强iOS开发之-cocopods安装
- php下载https图片,php下载https图片报错Failed to enable crypto
- Google 开源的 Android 排版库:FlexboxLayout
- CSP2020洛谷P7077:函数调用
- Linux配置scheme环境,用 Xcode Configuration 和 Scheme 配置项目环境
- 写一个c语言的链表记录一下
- Android测试之Monkey
- 服务器栈虚拟交换机,FusionSphere分布式虚拟交换机技术白皮书1.docx
- ad敷铜后还有部分飞线_眼花缭乱!超级无敌的飞线大法,打造一把超低功耗无线机械键盘...
- String类源码阅读
- Kubernetes 管理员认证(CKA)考试笔记(二)
- Python+matplotlib绘制极坐标柱状图(南丁格尔玫瑰图)
- 一大波猪年元素的二维码助你跨猪年!
- 计算机图像相关应用研究,计算机图像处理技术的应用探讨.pdf
- STM32MP157A驱动开发 | 03-usb host接口的使用(U盘 )
- VS2015制作服务程序安装包
- Android写一个简易计算器(可以实现连续计算)