【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…...
Xshell远程连接Kali（默认 | 私钥）Note版
前言:xshell远程连接，私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...
《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）
CSI-2 协议详细解析 (一） 1. CSI-2层定义（CSI-2 Layer Definitions） 分层结构 ：CSI-2协议分为6层： 物理层（PHY Layer） ： 定义电气特性、时钟机制和传输介质（导线&#…...
【Oracle】分区表
个人主页：Guiat 归属专栏：Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）
引言 在人工智能飞速发展的今天，大语言模型（Large Language Models, LLMs）已成为技术领域的焦点。从智能写作到代码生成，LLM 的应用场景不断扩展，深刻改变了我们的工作和生活方式。然而，理解这些模型的内部…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践
作者：吴岐诗，杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言：融合数据湖与数仓的创新之路 在数字金融时代，数据已成为金融机构的核心竞争力。杭银消费金…...
深入理解Optional：处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...