【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…...
工业—使用Flink处理Kafka中的数据_ChangeRecord1
使用 Flink 消费 Kafka 中 ChangeRecord 主题的数据，当某设备 30 秒状态连续为 “ 预警 ” ，输出预警 信息。当前预警信息输出后，最近30...
探索嵌入式硬件设计：揭秘智能设备的心脏
目录 引言 嵌入式系统简介 嵌入式硬件设计的组成部分 设计流程 微控制器选择 原理图设计 PCB布局 编程与调试 系统集成与测试 深入理解微控制器 存储器管理 输入/输出接口 通信接口 电源管理 硬件抽象层（HAL） 操作系统（OS&am…...
数据结构-最小生成树
一.最小生成树的定义 从V个顶点的图里生成的一颗树，这颗树有V个顶点是连通的，有V-1条边，并且边的权值和是最小的,而且不能有回路 二.Prim算法 Prim算法又叫加点法，算法比较适合稠密图 每次把边权最小的顶点加入到树中࿰…...
mac启动jmeter
// 设置使用java8，使用21版本会有问题 export JAVA_HOME/Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home/ export PATH$JAVA_HOME/bin:$PATH cd /Users/user/software/apache-jmeter-5.1.1 //设置不使用代理 sh jmeter -Jhttp.proxyHost -J…...
spring学习笔记之静态代理和动态代理
在 Spring 开发中，静态代理和动态代理是实现面向切面编程（AOP）的两种常见方式。两者的主要区别在于代理类的生成时间和方式。 静态代理 定义 静态代理是由开发者或工具在编译期明确创建代理类的方式，代理类和目标类在程序运行前就已经存在。 特点 代理类明确存在：需要…...
qemu搭建aarch64
qemu工具搭建aarch64系统 下载准备 下载qemu: https://qemu.weilnetz.de/w64/2022/qemu-w64-setup-20220831.exe 下载固件：https://publishing-ie-linaro-org.s3.amazonaws.com/releases/components/kernel/uefi-linaro/16.02/release/qemu64/QEMU_EFI.fd?Signat…...
delphi IDE 插件DelphiIDEPlugin_SearchProject，用于从项目组中查找项目
delphi IDE 插件DelphiIDEPlugin_SearchProject，用于从项目组中查找项目 安装后在菜单Tools下第一个子菜单项查找项目 delphiIDE插件DelphiIDEPlugin-SearchProject，用于从项目组中查找项目资源-CSDN文库...
【Vue】Scoped、组件间通信、Props检验
目录 Scoped 作用 *原理 组件通信 前置知识 什么是组件通信 为什么需要组件通信 如何进行组件通信 如何辨别两个组件的关系 父子组件通信 父传子 子传父 非父子组件通信 祖先传后代 语法 任意两个组件通信 步骤 Props校验 props是什么 作用 语法 组件的…...
openbmc dbus架构简析(二)
1.说明 以前看内核代码觉得难，是因为内核代码涉及到硬件原理与算法结构和层次递进的代码逻辑，现在的应用层因为业务的复杂与代码和内核的交互接口复杂，也变得有些难度了。 这篇文章是继:openbmc dbus架构简析的第二篇文章。 首先贴出来前篇…...
【二分查找】Leetcode例题
【1】69. x 的平方根 - 力扣（LeetCode） 🍡解题思路：首先想到的是暴力查找，从1开始依次比较x与num*num的大小，然后找出满足num*num<x且(num1)*(num1)>x的num值；再来看看能不能优化一下&…...