【Canvas与雷达】点鼠标可暂停金边蓝屏雷达显示屏
【成图】
【代码】
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>点鼠标可暂停金边蓝屏雷达显示屏 Draft1</title><style type="text/css">.centerlize{margin:0 auto;width:1200px;}</style></head><body οnlοad="init();"><div class="centerlize"><canvas id="myCanvas" width="12px" height="12px" style="border:1px dotted black;">如果看到这段文字说您的浏览器尚不支持HTML5 Canvas，请更换浏览器再试.</canvas></div></body>
</html>
<script type="text/javascript">
<!--
/*****************************************************************
* 将全体代码(从<!DOCTYPE到script>)拷贝下来，粘贴到文本编辑器中，
* 另存为.html文件，再用chrome浏览器打开，就能看到实现效果。
******************************************************************/// canvas的绘图环境
var ctx;// 高宽
const WIDTH=512;
const HEIGHT=512;// 舞台对象
var stage;// 暂停标志
var paused=false;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas'); // 设置点击鼠标暂停canvas.οnclick=function(e){paused=! paused;}// 设置高宽canvas.width=WIDTH;canvas.height=HEIGHT;// 初始化canvas的绘图环境ctx=canvas.getContext('2d'); ctx.translate(WIDTH/2,HEIGHT/2);// 原点平移// 准备stage=new Stage(); stage.init();// 开幕animate();
}// 播放动画
function animate(){ stage.update(); stage.paintBg(ctx);stage.paintFg(ctx); // 循环if(true){//sleep(100);window.requestAnimationFrame(animate); }
}// 舞台类
function Stage(){this.theta=0;// 初始化this.init=function(){}// 更新this.update=function(){ if(!paused){this.theta+=0.02;}}// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏 }// 画前景this.paintFg=function(ctx){// 底色ctx.save();ctx.fillStyle = "white";ctx.fillRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);ctx.restore();const R=210;// 基准尺寸// 第1圈ctx.save();var r=R*1.00;drawSolidCircle(ctx,0,0,r,"rgb(191,128,53)");ctx.restore();// 第2圈ctx.save();var r=R*0.995;var gnt=ctx.createLinearGradient(0,-r,0,r);gnt.addColorStop(0,"rgb(241,215,94)");gnt.addColorStop(0.5,"rgb(207,157,42)");gnt.addColorStop(1,"rgb(163,107,39)");drawSolidCircle(ctx,0,0,r,gnt);ctx.restore();// 第3圈ctx.save();var r=R*0.975;var gnt=ctx.createLinearGradient(0,-r,0,r);gnt.addColorStop(0,"rgb(165,108,32)");gnt.addColorStop(0.5,"rgb(212,158,44)");gnt.addColorStop(1,"rgb(247,215,100)");drawSolidCircle(ctx,0,0,r,gnt);ctx.restore();// 第4圈ctx.save();var r=R*0.955;var gnt=ctx.createLinearGradient(0,-r,0,r);gnt.addColorStop(0,"rgb(176,112,37)");gnt.addColorStop(0.5,"rgb(173,144,59)");gnt.addColorStop(1,"rgb(185,183,109)");drawSolidCircle(ctx,0,0,r,gnt);ctx.restore();// 第5圈 雷达屏开始ctx.save();var r=R*0.95;drawSolidCircle(ctx,0,0,r,"rgb(0,14,27)");ctx.restore();// 角度ctx.save();var r=R*0.90;var N=36;for(var i=0;i<N;i++){var theta=Math.PI*2/N*i-Math.PI/2;var pt=createPt(r*Math.cos(theta),r*Math.sin(theta));ctx.font=r/22+"px Microsoft YaHei UI";ctx.textAlign="center";ctx.textBaseLine="Middle";ctx.fillStyle="rgb(43,185,187)";ctx.fillText((i*10).toString().padStart(3, '0'),pt.x,pt.y+r/45);}ctx.restore();// 大圆ctx.save();var r=R*0.85;ctx.strokeStyle="rgb(43,185,187)";ctx.lineWidth=R/105;ctx.beginPath();ctx.arc(0,0,r,0,Math.PI*2,false);ctx.closePath();ctx.stroke();ctx.restore();// 刻度ctx.save();var r=R*0.85;var N=36;for(var i=0;i<N;i++){var theta=Math.PI*2/N*i; var rad1=r/20*20;var rad2=r/20*18; var rad3=r/20*19;var pt=createPt(rad1*Math.cos(theta),rad1*Math.sin(theta));var pt2=createPt(rad2*Math.cos(theta),rad2*Math.sin(theta));if(i%2==0){pt2=createPt(rad3*Math.cos(theta),rad3*Math.sin(theta));}ctx.lineWidth=R/210;ctx.strokeStyle="rgb(43,185,187)";ctx.beginPath();ctx.moveTo(pt.x,pt.y);ctx.lineTo(pt2.x,pt2.y);ctx.stroke(); }ctx.restore();// 纵横线ctx.save();var r=R*0.85; ctx.arc(0,0,r,0,Math.PI*2,false);ctx.clip();// 切图圆ctx.strokeStyle="rgb(43,185,187)";ctx.lineWidth=R/420;var N=12;var PART=2*r/N;for(var i=0;i<N;i++){ // 竖线var a=createPt(-r+i*PART,-r);var b=createPt(-r+i*PART,+r);ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}for(var i=0;i<N;i++){ // 横线var a=createPt(-r,-r+i*PART);var b=createPt(+r,-r+i*PART);ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.stroke();}ctx.restore();// 五个同心圆ctx.save();var r=R*0.85;ctx.strokeStyle="rgb(43,185,187)";ctx.lineWidth=R/420;for(var i=1;i<=5;i++){var radius=r/5*i;ctx.beginPath();ctx.arc(0,0,radius,0,Math.PI*2,false);ctx.closePath();ctx.stroke();}ctx.restore();// 扫描扇形ctx.save();const ANGLE=Math.PI/3*1;var r=R*0.85;var a=createPt(r*Math.cos(this.theta),r*Math.sin(this.theta));var b=createPt(r*Math.cos(this.theta+ANGLE),r*Math.sin(this.theta+ANGLE));var c=createPt(a.x*Math.cos(ANGLE),a.y*Math.cos(ANGLE));ctx.strokeStyle="rgb(43,185,187)";// 牵引棒ctx.lineWidth=R/210;ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(b.x,b.y);ctx.stroke();var gnt=ctx.createLinearGradient(b.x,b.y,c.x,c.y);// 线性渐变色gnt.addColorStop(0,"rgba(255,255,255,0.6)");gnt.addColorStop(0.5,"rgba(255,255,255,0.4)");gnt.addColorStop(1,"rgba(255,255,255,0.2)");ctx.fillStyle=gnt;ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(a.x,a.y);ctx.arc(0,0,r,this.theta,this.theta+ANGLE,false);ctx.closePath();ctx.fill();ctx.restore();// 三个模拟目标点ctx.save();var r=R*0.98;var startAngle=((this.theta/Math.PI*180)%360)/180*Math.PI;var endAngle=(((this.theta+ANGLE)/Math.PI*180)%360)/180*Math.PI;var l=r*0.55;var angle=Math.PI*0.33;var a=createPt(l*Math.cos(angle),l*Math.sin(angle));if(startAngle<angle && angle<endAngle){drawSolidCircle(ctx,a.x,a.y,r*0.02,"white");}else{ var gnt=ctx.createRadialGradient(a.x,a.y,0,a.x,a.y,r*0.02);// 辐射渐变gnt.addColorStop(0,"rgba(190,199,190,0.8)");gnt.addColorStop(0.5,"rgba(190,199,190,0.4");gnt.addColorStop(1,"rgba(190,199,190,0.1");drawSolidCircle(ctx,a.x,a.y,r*0.02,gnt);}l=r*0.75;angle=Math.PI*0.8;var a=createPt(l*Math.cos(angle),l*Math.sin(angle));if(startAngle<angle && angle<endAngle){drawSolidCircle(ctx,a.x,a.y,r*0.02,"white");}else{ var gnt=ctx.createRadialGradient(a.x,a.y,0,a.x,a.y,r*0.02);// 辐射渐变gnt.addColorStop(0,"rgba(190,199,190,0.8)");gnt.addColorStop(0.5,"rgba(190,199,190,0.4");gnt.addColorStop(1,"rgba(190,199,190,0.1");drawSolidCircle(ctx,a.x,a.y,r*0.02,gnt);}var l=r*0.65;var angle=Math.PI*1.4;var a=createPt(l*Math.cos(angle),l*Math.sin(angle));if(startAngle<angle && angle<endAngle){drawSolidCircle(ctx,a.x,a.y,r*0.02,"white");}else{ var gnt=ctx.createRadialGradient(a.x,a.y,0,a.x,a.y,r*0.02);// 辐射渐变gnt.addColorStop(0,"rgba(190,199,190,0.8)");gnt.addColorStop(0.5,"rgba(190,199,190,0.4");gnt.addColorStop(1,"rgba(190,199,190,0.1");drawSolidCircle(ctx,a.x,a.y,r*0.02,gnt);}ctx.restore();writeText(ctx,WIDTH/2-30,HEIGHT/2-5,"逆火制图","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
ctx:绘图上下文
x:矩形中心横坐标
y:矩形中心纵坐标
r:圆半径
color:填充圆的颜色
----------------------------------------------------------*/
function drawSolidCircle(ctx,x,y,r,color){ctx.fillStyle=color;ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2,false);ctx.closePath();ctx.fill();
}/*----------------------------------------------------------
函数:创建一个二维坐标点
x:横坐标
y:纵坐标
Pt即Point
----------------------------------------------------------*/
function createPt(x,y){var retval={};retval.x=x;retval.y=y;return retval;
}/*----------------------------------------------------------
函数:延时若干毫秒
milliseconds:毫秒数
----------------------------------------------------------*/
function sleep(milliSeconds) {const date = Date.now();let currDate = null;while (currDate - date < milliSeconds) {currDate = Date.now();}
}/*----------------------------------------------------------
函数:书写文字
ctx:绘图上下文
x:横坐标
y:纵坐标
text:文字
font:字体
color:颜色
----------------------------------------------------------*/
function writeText(ctx,x,y,text,font,color){ctx.save();ctx.textBaseline="bottom";ctx.textAlign="center";ctx.font = font;ctx.fillStyle=color;ctx.fillText(text,x,y);ctx.restore();
}/*-------------------------------------------------------------
人不自信的最根本原因是什么？
对世界：没有认识到，这个世界就是个巨大的草台班子
对自己：没有认识到，除了极个别天才，其他人之间差别没想象的那麽大
比你拉跨，但比你赚钱多的人有，比你牛，但没你赚钱多的人也有
放轻松，才能展示自己最好的一面。
负担不要太重，也不要怕出丑，
其实人生，无非就是：你笑笑别人，别人笑笑你。
--------------------------------------------------------------*/
//-->
</script>
END
相关文章：
【Canvas与雷达】点鼠标可暂停金边蓝屏雷达显示屏
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>点鼠标可暂停金边蓝屏雷达显示屏 Draft1</title><style typ…...
React第十二节组件之间通讯之发布订阅模式（使用pubsub-js插件）
组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍 1、安装 pubsub-js 插件 yarn add pubsub-js 常用的事件 a、发布事件：传入一个自定义事件名称（name），以及要发布的消息内…...
Vue3安装 运行教程
本文是综合了所有vue安装教程而成 更细化 更简略 希望对各位读者有所帮助！ Vue安装 1. Vue-cli脚手架安装 安装vue的方式有很多 我们这里选择npm方式安装vue npm方式 npm方式安装vue，详细介绍见下文。 1.node.js安装和配置 安装npm 需要安装note.js&…...
MySQL：约束constraint
约束就是表中数据的限制条件. 表在设计的时候加入约束的目的是为了保证表中记录的完整性和有效性，如用户表有些列的值（手机号）不能为空，有些列的值（身份证号）不能重复。 主键约束(primary key) PK MySQL主…...
使用Rufus制作Ubuntu需要注意
在使用Rufus制作Ubuntu启动盘并进行BIOS设置时，需要注意以下几点： 关闭RST（英特尔 快速存储技术）：在BIOS设置中，如果电脑启用了RST功能，需要将其关闭。因为Ubuntu可能无法检测到硬盘&a…...
探索Go语言的高级特性：性能分析与安全性
Go语言性能分析与安全性 引言 Go语言因其高效的并发特性、简洁的语法和强大的工具链而受到广泛欢迎。在实际开发中，性能分析和安全性是需要特别关注的两个方面。本文将深入探讨Go语言中的性能分析工具和安全性考虑，帮助开发者编写高效、安全的Go应用程…...
SearchSploit配合gcc的使用
渗透测试中，SearchSploit是一个非常有用的工具，用于在Exploit数据库中搜索漏洞利用代码。其使用方法如下： 安装SearchSploit：首先确保你的系统中已经安装了Kali Linux，因为SearchSploit是Kali Linux的一部分。如果没有…...
无人机设计:云台挂载!
一、无人机云台挂载设置 安装与固定 将云台固定到无人机的挂载点上，通常需要使用专用的固定架和螺丝等工具。 确保云台与无人机之间的连接牢固，避免在飞行过程中出现松动或脱落的情况。 连接与调试 将云台与无人机之间的连接线缆（如电源…...
Spring Native适用场景、代理使用及测试部署策略
文章目录 1. Spring Native 适用的应用程序2. 在 Spring Native 中使用代理3. 测试和部署 Spring Native 应用测试部署 1. Spring Native 适用的应用程序 微服务：微服务架构中每个服务都相对独立，快速启动时间和较低的资源消耗对于提高部署效率和服务响…...
LeetCode—11. 盛最多水的容器（中等）
题目描述： 给定一个长度为 n 的整数数组 height 。有 n 条垂线，第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线，使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明：…...
第一部分：入门准备 1.欢迎来到新手村 --[JavaScript 新手村：开启编程之旅的第一步]
为什么学习 JavaScript？ 学习 JavaScript 有多个重要的理由，它在现代 Web 开发中扮演着不可或缺的角色。以下是几个关键原因： 1. 广泛的应用 JavaScript 是唯一可以在浏览器端直接运行的编程语言，几乎所有的网站和Web应用都使用…...
BERT的中文问答系统50
我们将对BERT的中文问答系统48-1代码进行以下改进： 1.增加时间日期和日历功能：在GUI中增加显示当前时间和日期的功能，并提供一个日历组件。 2.增加更多模型类型：增加娱乐、电脑、军事、汽车、植物、科技、历史（朝代、皇帝）、名人、生活（出行、菜品、菜谱、居家），法律、…...
深入解析CMake中的find_package命令：用法、特性及版本依赖问题
深入解析CMake中的find_package命令：用法、特性及版本依赖问题 在现代软件开发中，CMake作为一个强大的构建系统，广泛应用于跨平台项目的管理与编译。find_package是CMake中一个核心命令，用于查找并配置项目所依赖的外部库或包。本…...
【OpenDRIVE_Python】使用python脚本输出OpenDRIVE数据中含有隧道tunnel的道路ID和隧道信息
示例代码说明： 遍历OpenDRIVE数据中每条道路Road,若Road中存在隧道tunnel属性，则将该道路ID和包含的所有隧道信息输出到xml文件中。 import xml.dom.minidom from xml.dom.minidom import parse from xml.dom import Node import sys import os # 读取…...
鉴权)
SIP系列五：HTTP(SIP)鉴权
我的音视频/流媒体开源项目(github) SIP系列目录 目录 一、基本认证(basic) 二、摘要认证(digest) 1、摘要认证(digest) RFC 2069 2、摘要认证(digest) RFC 2617 2.1、未定义qop字段或值为"(空) 2.2、qop值为"auth" 2.3、qop值为"auth-int&quo…...
mysql json整数数组去重 整数数组精确查找并删除相应数据
都是针对整数数组 。低版本可用。懒得去查找资料的可以参考下。 json整数数组查找具体数据修改或者删除： update saas_new_tms.eda_logistics_limit set service_attribute json_remove(service_attribute,json_unquote(json_search(replace(service_attribute,…...
【5G】技术组件 Technology Components
5G的目标设置非常高，不仅在数据速率上要求达到20Gbps，在容量提升上要达到1000倍，还要为诸如大规模物联网（IoT， Internet of Things）和关键通信等新服务提供灵活的平台。这些高目标要求5G网络采用多种新技术…...
数据结构4——栈和队列
目录 1.栈 1.1.栈的概念及结构 1.2栈的实现 2.队列 2.1队列的概念及结构 2.2队列的实现 1.栈 1.1.栈的概念及结构 栈：一种特殊的线性表，其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一段称为栈顶，另一端称为…...
PHP SM4 加密
PHP SM4 加密 sm4基类 class Sm4 {private $ck [0x00070e15, 0x1c232a31, 0x383f464d, 0x545b6269,0x70777e85, 0x8c939aa1, 0xa8afb6bd, 0xc4cbd2d9,0xe0e7eef5, 0xfc030a11, 0x181f262d, 0x343b4249,0x50575e65, 0x6c737a81, 0x888f969d, 0xa4abb2b9,0xc0c7ced5, 0xdce3ea…...
leetcode - 2825. Make String a Subsequence Using Cyclic Increments
Description You are given two 0-indexed strings str1 and str2. In an operation, you select a set of indices in str1, and for each index i in the set, increment str1[i] to the next character cyclically. That is ‘a’ becomes ‘b’, ‘b’ becomes ‘c’, an…...
UE5下载安装避坑指南：硬件驱动、VS环境与版本管理实战
1. 这不是“点几下就能好”的安装，而是UE5项目生命周期的第一次关键决策很多人点开Epic Games Launcher，看到那个醒目的“Install”按钮，下意识就点了下去——结果十分钟后卡在98%，或者装完打开编辑器直接报错“Failed to load mo…...
LIMA模型：仅需千条优质数据，SFT微调即可媲美GPT-4的对齐效果
1. 项目概述：LIMA的横空出世与核心价值最近，Meta AI发布了一个名为LIMA（Less Is More for Alignment）的模型，在社区里激起了不小的水花。这个项目的标题信息量巨大——“媲美GPT-4”、“无需RLHF就能对齐”，…...
我在大厂做开发的5年：那些996的日子
作为一名在互联网大厂摸爬滚打五年的开发工程师，如今转型成为软件测试团队的负责人，回望过去那些被996填满的日子，我有太多话想对同为技术从业者的测试同仁们说。这些经历不仅是我个人的成长印记，更藏着开发与测试岗位在高压环境下…...
ElevenLabs陕西话语音落地实录：从零配置API到高保真秦腔语调还原，7步搞定方言TTS部署
更多请点击： https://kaifayun.com 第一章：ElevenLabs陕西话语音落地实录：从零配置API到高保真秦腔语调还原，7步搞定方言TTS部署 环境准备与API密钥获取 首先注册ElevenLabs账号并进入 Profile → API Keys页面，生成…...
CMake基础：常用内部变量和环境变量的引用
目录 1.常用 CMake 变量 1.1.编译与构建控制 1.2.路径与目录变量 1.3.项目信息变量 1.4.系统与平台变量 1.5.工具链与交叉编译 1.6.测试与安装变量 1.7.高级编译选项 2.常用环境变量 2.1.编译器与工具链 2.2.依赖库路径 2.3.CMake 专用环境变量 2.4.系统环境变量P…...
Cadence 17.4 CIS配置踩坑实录：MySQL元件数据库连接失败与中文乱码全解决
Cadence 17.4 CIS配置实战：MySQL元件数据库连接与中文乱码终极解决方案 当工程师尝试将Cadence CIS与MySQL数据库集成时，往往会遇到两个令人头疼的问题：连接失败和中文乱码。这两个问题看似简单，却可能耗费大量调试时间。本文将深…...
【Spring】 AOP 核心原理，与声明式事务传播机制
一、什么是 AOPAOP（Aspect Oriented Programming，面向切面编程）核心思想在不修改原有业务代码的情况下，对方法进行统一增强。例如：日志记录；权限校验；事务管理；性能统计；…...
SleeperX：macOS系统级电源管理架构解析与深度集成方案
SleeperX：macOS系统级电源管理架构解析与深度集成方案 【免费下载链接】SleeperX MacBook prevent idle/lid sleep! Hackintosh sleep on low battery capacity. 项目地址: https://gitcode.com/gh_mirrors/sl/SleeperX 在macOS生态系统中，电源管…...
谷歌I/O前夜Veo 4遭泄露，AI视频底层逻辑浮出水面
谷歌I/O大会开幕前夕，关于Veo 4（或被爆料的称作Gemini Omni）的泄露信息开始在圈内流传，而这次泄露所揭示的并非简单的参数迭代，而是一个真正触及AI视频生成底层范式的技术突破——它开始学会“切镜头”了。 这一变化之…...
实测Taotoken在多模型调用下的延迟与稳定性体感
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 实测Taotoken在多模型调用下的延迟与稳定性体感 1. 引言 在集成多个大模型API到实际业务或开发工作流时，开发者通常需…...