html信号动画,HTML5 Canvas火箭着陆和雷达信号动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = 150;
let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let lineY = 0;
let lines = [];
for (let i = 0; i < 3; i++) {
lines.push({
y: i * canvas.height / 3
});
}
function update(dt) {
for (let i = 0; i < lines.length; i++) {
lines[i].y += 1.2;
if (lines[i].y >= canvas.height) {
lines[i].y = 0;
}
}
}
function draw(dt) {
requestAnimationFrame(draw);
update(dt);
ctx.fillStyle = "#24241f";
ctx.strokeStyle = "#dd5277";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.shadowColor = '#dd5277';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 20;
for (let i = lines.length - 1; i >= 0; i--) {
ctx.beginPath();
ctx.moveTo(0, lines[i].y);
ctx.lineWidth = 0.2 + (lines[i].y * (1.5 - 0.2) / canvas.height)
ctx.lineTo(canvas.width, lines[i].y);
ctx.stroke();
}
ctx.lineWidth = 3.0;
// middle line
ctx.beginPath();
ctx.moveTo(centerX, 0);
ctx.lineTo(centerX, canvas.height);
ctx.stroke();
let spacing = 80;
let verticalLines = Math.round(canvas.width / spacing / 2);
for (let i = 1; i <= verticalLines; i++) {
ctx.beginPath();
ctx.moveTo(centerX - (i * spacing), -1);
ctx.bezierCurveTo(
centerX - (i * spacing) * 1.5, 10,
centerX - (i * spacing) * 2.5, canvas.height,
centerX - (i * spacing) * 2.5, canvas.height,
);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(centerX + (i * spacing), -1);
ctx.bezierCurveTo(
centerX + (i * spacing) * 1.5, 10,
centerX + (i * spacing) * 2.5, canvas.height,
centerX + (i * spacing) * 2.5, canvas.height,
);
ctx.stroke();
}
}
draw();
html信号动画,HTML5 Canvas火箭着陆和雷达信号动画相关推荐
- android 漩涡动画,html5 canvas酷炫的粒子漩涡动画特效
特效描述:html5 canvas 粒子漩涡 动画特效.html5粒子漩涡动画,酷炫的粒子动画特效 代码结构 1. HTML代码 function project3D(x,y,z,vars){ var ...
- html5标签云,TagCanvas - HTML5 Canvas技术开发的标签云动画
TagCanvas 是一个基于HTML5Canvas技术开发的标签云动画.还提供一个以jQuery插件形式实现的版本.它支持文本和图片两种格式,能够以 Sphere, hcylinder 或 vcy ...
- html5 canvas酷炫3D背景打开动画特效
html5 canvas酷炫3D背景打开动画特效 点击跳转到演示地址 点击进入资源下载地址
- html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示 下载资源: 13 次 下载资源 下载积分: 20 积分 js代码 window.onload = ...
- HTML粒子碰撞烟花,html5 canvas漂亮的粒子烟花背景动画特效
特效描述:html5 canvas 漂亮的粒子烟花 背景动画特效.html5 canvas漂亮的粒子烟花背景动画特效 代码结构 1. HTML代码 class Vector2 { constructo ...
- 常用雷达信号的matlab仿真_常用的雷达信号:基于DDS的线性调频信号的产生
大侠好,欢迎来到FPGA技术江湖,江湖偌大,相见即是缘分.大侠可以关注FPGA技术江湖,在"闯荡江湖"."行侠仗义"栏里获取其他感兴趣的资源,或者一起煮酒言欢. ...
- html 穿越星空效果,html5 canvas绚丽3d星空飞行穿梭动画特效
简要教程 这是一款使用 html5 canvas和 jQuery 制作的绚丽3d星空飞行穿梭动画特效.该3d星空飞行特效模拟了飞船在宇宙星空中快速穿梭的动画场景,效果非常逼真. HTML结构 HTML ...
- html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
- html5 canvas全屏变色波浪线条动画js特效
下载地址 基于html5 canvas+js制作的全屏变色波浪线条动画特效,线条发光背景颜色变换效果. dd:
最新文章
- 不符合核销规则条件_1136家建筑企业资质核查不符合条件,复查合格率仅50
- 灰度值取值范围_灰度实战(二):Apollo配置中心(2)
- 用BFS(广度优先搜索queuelist)算法解决农夫过河问题
- (译)如何使用cocos2d来制作一个打地鼠的游戏:第一部分
- 51Node 01组成的N的倍数
- 静态注册BroadcastReceiver内部类
- UVA10129 Play on Words (并查集判连通+欧拉回路)
- 若依如何配置允许跨域访问?
- java调用shell命令并获取执行结果
- tomcat配置ssl证书
- 阿里建直营物流,“三通一达”要被踢出局了?
- dbt2 mysql_2.5.4 数据库测试套件中的dbt2 TPC-C 测试
- mac 树莓派 kali linux系统,MacOS制作树莓派kali系统
- 在线教育凛冬将至!强敌环伺的尚德机构,能否突出重围?
- javaweb实现支付宝扫码支付完整流程
- C++引用计数原理和实现
- XGBoost原论文阅读翻译
- Java中的四个核心技术思想
- js获取当前服务器的ip
- apktool反编译及后续打包
热门文章
- 在Windows 7解决GAC错误
- oracle10g 监听服务无法启动
- linux——线程(2)
- 计算机网络(二十五)-IP数据报格式
- 计算机网络(二十一)-数据链路层设备
- tcp连接工具_基于Swoole如何搭建TCP服务,你掌握了吗?
- php7 返回值,7.6.4 函数返回值
- ubuntu20.04安装Qt5.15.2并配置环境
- android按钮点击无响应时间,AndroidStudio下的点击事件不响应
- redis实例python_生产消费者模式与python+redis实例运用(基础篇)