【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…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性，不同版本的Docker对内核版本有不同要求。例如，Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本，Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同，结合所安装的tensorflow的目录结构修改from语句即可。 原语句： from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后： from tensorflow.python.keras.lay…...
保姆级教程：在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama（有网络的电脑）2.2.3 安装Ollama（无网络的电脑）2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
Modbus RTU与Modbus TCP详解指南
目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...
基于单片机的宠物屋智能系统设计与实现（论文+源码）
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢，连接红外测温传感器，可实时精准捕捉宠物体温变化，以便及时发现健康异常；水位检测传感器时刻监测饮用水余量，防止宠物…...
FTXUI::Dom 模块
DOM 模块定义了分层的 FTXUI::Element 树，可用于构建复杂的终端界面，支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...
Python爬虫（四）：PyQuery 框架
PyQuery 框架详解与对比 BeautifulSoup 第一部分：PyQuery 框架介绍 1. PyQuery 是什么？ PyQuery 是一个 Python 的 HTML/XML 解析库，它采用了 jQuery 的语法风格，让开发者能够用类似前端 jQuery 的方式处理文档解析。它的核心特…...
Web APIS Day01
1.声明变量const优先 那为什么一开始前面就不能用const呢，接下来看几个例子： 下面这张为什么可以用const呢？因为复杂数据的引用地址没变，数组还是数组，只是添加了个元素，本质没变，所以可以用con…...