【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…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
（二）原型模式
原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
（转）什么是DockerCompose?它有什么作用？
一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用，而无需手动一个个创建和运行容器。 Compose文件是一个文本文件，通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket（服务端和客户端都要）2. 绑定本地地址和端口&#x…...
FFmpeg：Windows系统小白安装及其使用
一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】，注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录（即exe所在文件夹）加入系统变量…...