当前位置：首页 > news >正文

【Canvas与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）

news 2026/5/21 14:03:53

【成图】

【代码】

<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head><title>六角回旋镖桌面1920x1080</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=1920;
const HEIGHT=1080;// 舞台对象
var stage;//-------------------------------
// 初始化
//-------------------------------
function init(){// 获得canvas对象var canvas=document.getElementById('myCanvas');  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.init=function(){}// 更新this.update=function(){    }// 画背景this.paintBg=function(ctx){ctx.clearRect(-WIDTH/2,-HEIGHT/2,WIDTH,HEIGHT);// 清屏    }// 画前景this.paintFg=function(ctx){// 底色ctx.fillStyle = "navy";ctx.fillRect(0,0,WIDTH,HEIGHT);        const D=60;// 中心距const R=D/Math.sqrt(3);const IMax=Math.ceil(WIDTH/D)+1;const JMax=Math.ceil(HEIGHT/D);// 绘制满屏回旋镖for(var i=0;i<IMax;i++){for(var j=0;j<IMax;j++){var pt=createPt(i*D+(j%2==0?0:1)*D/2,j*D/2*Math.sqrt(3));//drawSolidCircle(ctx,pt.x,pt.y,3,"red");drawDart(ctx,pt.x,pt.y,D);}}// 蒙版ctx.fillStyle="rgba(9,9,9,0.85)";ctx.fillRect(0,0,WIDTH,HEIGHT);writeText(ctx,WIDTH-30,HEIGHT-5,"逆火原创","8px consolas","lightgrey");// 版权}
}/*----------------------------------------------------------
函数:用于绘制单个六角飞镖
ctx:绘图上下文
x:立方体中心横坐标
y:立方体中心纵坐标
distance:每个飞镖的中心距
----------------------------------------------------------*/
function drawDart(ctx,x,y,distance){const D=distance*Math.sqrt(3)/6;var omega=createPt(x,y);var r=D;var angle=-Math.PI/2;var a=createPt(omega.x+r*Math.cos(angle),omega.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/2;var b=createPt(omega.x+r*Math.cos(angle),omega.y+r*Math.sin(angle));r=D;angle=-Math.PI/6;var c=createPt(b.x+r*Math.cos(angle),b.y+r*Math.sin(angle));r=2*D;angle=Math.PI/2;var d=createPt(c.x+r*Math.cos(angle),c.y+r*Math.sin(angle));r=1*D;angle=-Math.PI/6;var e=createPt(d.x+r*Math.cos(angle),d.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6;var f=createPt(e.x+r*Math.cos(angle),e.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6*5;var g=createPt(f.x+r*Math.cos(angle),f.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*1;var h=createPt(g.x+r*Math.cos(angle),g.y+r*Math.sin(angle));r=1*D;angle=Math.PI/2;var j=createPt(h.x+r*Math.cos(angle),h.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6*7;var k=createPt(j.x+r*Math.cos(angle),j.y+r*Math.sin(angle));r=1*D;angle=Math.PI/2;var l=createPt(k.x+r*Math.cos(angle),k.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*5;var m=createPt(l.x+r*Math.cos(angle),l.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/2;var n=createPt(m.x+r*Math.cos(angle),m.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*5;var o=createPt(n.x+r*Math.cos(angle),n.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*7;var p=createPt(o.x+r*Math.cos(angle),o.y+r*Math.sin(angle));r=2*D;angle=-Math.PI/6;var q=createPt(p.x+r*Math.cos(angle),p.y+r*Math.sin(angle));r=1*D;angle=Math.PI/6*7;var s=createPt(q.x+r*Math.cos(angle),q.y+r*Math.sin(angle));r=1*D;angle=-Math.PI/2;var t=createPt(s.x+r*Math.cos(angle),s.y+r*Math.sin(angle));r=2*D;angle=Math.PI/6;var u=createPt(t.x+r*Math.cos(angle),t.y+r*Math.sin(angle));ctx.lineWidth=2;ctx.strokeStyle="gold";ctx.fillStyle="navy";ctx.beginPath();ctx.moveTo(a.x,a.y);ctx.lineTo(b.x,b.y);ctx.lineTo(c.x,c.y);ctx.lineTo(d.x,d.y);ctx.lineTo(e.x,e.y);ctx.lineTo(f.x,f.y);ctx.lineTo(g.x,g.y);ctx.lineTo(h.x,h.y);ctx.lineTo(j.x,j.y);ctx.lineTo(k.x,k.y);ctx.lineTo(l.x,l.y);ctx.lineTo(m.x,m.y);ctx.lineTo(n.x,n.y);ctx.lineTo(o.x,o.y);ctx.lineTo(p.x,p.y);ctx.lineTo(q.x,q.y);ctx.lineTo(s.x,s.y);ctx.lineTo(t.x,t.y);ctx.lineTo(u.x,u.y);ctx.closePath();ctx.fill();ctx.stroke();
}/*----------------------------------------------------------
函数:用于绘制实心圆,用途是标记点以辅助作图
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与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）

【成图】【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>六角回旋镖桌面1920x1080</title><style type"text/cs…...

编程日记 2024/9/11 11:07:08

创游系列开心娱乐完整组件

别人分享的一套东西，是个不错的娱乐源码，里面包含了很多小游戏。可以创建房间。没测试自行研究吧，内含搭建教程。代码免费下载：百度网盘...

编程日记 2024/9/11 11:05:05

高效驱动之选 ——KP85211ASGA 半桥栅极驱动器内置互锁死区

KP85211A是一款 225V 耐压，具有 1A 拉电流和 1.5A 灌电流能力的半桥栅极驱动器，专用于驱动功率MOSFET或IGBT。采用高压器件工艺技术，具有良好的电流输出及出色的抗瞬态干扰能力。可保证开关节点 VS 瞬态 -7V 情况下系统正常工作。可支持开关节…...

编程日记 2024/9/11 11:04:04

建投数据获批安全生产许可证

9月1日，建投数据成功获批由北京市住房和城乡建设委员会核发的《安全生产许可证》。该资质的获得，是建投数据能力与实力的展现，更是对其企业规模、管理水平、项目业绩等的肯定。《安全生产许可证》是国家为了加强安全生产监督管理&#xff0c…...

编程日记 2024/9/11 11:03:03

MCU9.reg52.h的介绍

1.引用头文件的两种方式 #include <reg52.h> #include "reg52.h" 区别:优先搜索的位置不同! 在keil软件中 #include <reg52.h> 优先搜索软件安装的INC文件夹 #include "reg52.h" 优先搜索当前工程文件夹下的头文件,如果没有,则在软件安装的…...

编程日记 2024/9/11 10:54:55

Python知识点：如何使用Python进行二维码生成与识别

在Python中，生成和识别二维码可以使用不同的库来实现。最常用的库包括 qrcode 和 pyzbar。以下是如何使用这些库来生成和识别二维码的示例： 1. 生成二维码你可以使用 qrcode 库来生成二维码。首先，你需要安装它： pip install …...

编程日记 2024/9/11 10:53:55

跨域问题(CORS)

文章目录介绍解决一、添加跨域头，允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理介绍跨域资源共享（CORS, Cross-Origin Resource Sharing）是浏览器的一个安全机制，用来防止来自一个域的网页对另一个域下的资源进行…...

编程日记 2024/9/11 10:50:51

评测AI写毕业论文软件排行榜前十名的网站

在当今信息爆炸的时代，AI智能写作工具已经成为我们写作过程中的得力助手。特别是对于学术论文的撰写，这些工具不仅能够提高写作效率，还能帮助用户生成高质量的文稿。以下是五款值得推荐的AI智能写论文软件，其中特别推荐千笔-AIPas…...

编程日记 2024/9/11 10:48:49

发邮件格式

邮件作为一种正式的沟通方式，其格式通常需要遵循一定的规范。尊敬的xx：(无缩进) 您好！(缩进两个字符) 正文(缩进两个字符)xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xx…...

编程日记 2024/9/11 10:47:48

解锁Web3.0——Scaffold-eth打造以太坊DApp的终极指南

🚀本系列文章为个人学习笔记，目的是巩固知识并记录我的学习过程及理解。文笔和排版可能拙劣，望见谅。目录前言一、快速部署 1、前期准备： 2、安装项目： 二、配置部署运行环境 1、初始化本地链：…...

编程日记 2024/9/11 10:45:45

机器学习之监督学习(四)决策树和随机森林

机器学习之监督学习（四）决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 2. 随机森林 Random Forest3. 决策树 vs 神经网络4. 代码实现手写版本sklearn版本 5. 案例Iris数据集介绍实验代码 0. 文章传送机器学习之监督学习&#…...

编程日记 2024/9/11 10:44:44

Sky Takeaway

软件开发整体介绍软件开发流程角色分工软件环境苍穹外卖项目介绍定位：专门为餐饮企业定制的一款软件产品技术选型前端环境搭建阅读readme文档 nginx.exe放入无中文目录运行并启动后端环境搭建项目结构 Nginx反向代理优点配置 Nginx反向代理负…...

编程日记 2024/9/11 10:43:43

JavaScript 模板字符串

模板字符串（Template Literals）是 JavaScript ES6 引入的一项功能，它让字符串的处理变得更加灵活和直观。以下是对模板字符串的详细介绍，包括它的基本特性、用法以及一些高级用法。一基本特性 1. 多行字符串模板字符串允许创…...

编程日记 2024/9/11 10:41:41

模拟new关键字时产生的问题，求解答！

目的：编写函数myNew来模拟new关键字首先，我们知道new关键字的工作： 1.产生一个新对象 2.将新对象的__proto__属性指向构造函数的prototype属性 3.将新对象赋值给构造函数的this 4.执行构造函数中的代码函数实现如下： fun…...

编程日记 2024/9/11 10:40:40

SpringBoot2：请求处理原理分析-接口参数解析原理(argumentResolvers)

一、知识回顾我们知道，接口的参数，一般都要配上注解来一起使用。不同的参数注解，决定了传参的方式不同。为什么会这样？ 如果让你设计接口参数解析，你会怎么做？ 首先，我们知道方法参数是形…...

编程日记 2024/9/11 10:39:39

java实现文本相似度计算

需求 **文本推荐：**有多个文本字符串，如何设计一个简单的统计方法（从词频的角度设计），来计算出多个文本字符串两两之间的相似度，并输出大于指定相似度阈值的文本分析理解使用Java实现文本相似度计算的…...

编程日记 2024/9/11 10:37:37

基于无人机边沿相关 ------- IBUS、SBUS协议和PPM信号

文章目录一、IBUS协议二、SBUS协议三、PPM信号一、IBUS协议 IBUS（Intelligent Bus）是一种用于电子设备之间通信的协议，采用串行通信方式，允许多设备通过单一数据线通信，较低延迟，支持多主机和从机结构&a…...

编程日记 2024/9/11 10:36:36

django学习入门系列之第十点《A 案例：员工管理系统4》

文章目录 6 部门管理（原始方式）6.6 添加界面的导入（数据库）6.7 删除按键的应用6.8 编辑按键的应用6.81 传值的另一种方式 6.9 提交按键的应用往期回顾 6 部门管理（原始方式） 6.6 添加界面的导入&#xff…...

编程日记 2024/9/11 10:34:35

【2024】Math-Shepherd：无需人工注释即可逐步验证和强化法学硕士。

搜索词： Math-shepherd: Verify and reinforce llms step-by-step without human annotations P Wang, L Li, Z Shao, R Xu, D Dai, Y Li, D Chen, Y Wu, Z Sui Proceedings of the 62nd Annual Meeting of the Association for …, 2024•aclanthology.org 摘要…...

编程日记 2024/9/11 10:33:34

[苍穹外卖]-08微信支付详解

地址簿管理分析需求: 查询地址列表/新增地址/修改地址/删除地址/设置默认地址/查询默认地址接口设计新增地址接口查询用户所有的地址接口查询默认地址接口根据id修改地址接口根据id删除地址接口根据id查询地址接口设置默认地址接口数据库设计: 收货地址簿(address_…...

编程日记 2024/9/11 10:31:32

OpenHarmony富设备开发实战：基于DAYU200的硬件选型、系统烧录与AI应用开发

1. DAYU200：OpenHarmony富设备开发的“敲门砖”与“试验田”如果你是一名对OpenHarmony感兴趣，尤其是想涉足标准系统（也就是我们常说的富设备）开发的工程师或爱好者，那么“开发板选型”大概率是你遇到的第一个难题。几…...

编程新知 2026/5/21 13:23:19

2026上海楼宇自控系统 / DDC 自控系统/能耗监测系统厂家知名厂家推荐品牌选型指南！

根据 2026 年最新行业调研数据，楼宇自控市场已迎来深刻变革。在 “双碳” 战略深入推进与国产替代进程加速的双重驱动下，国产品牌已正式跻身行业第一梯队，与霍尼韦尔、江森自控、西门子等国际巨头同台竞技。在此行业格局重组的浪潮中&#xf…...

编程新知 2026/5/21 13:13:14

初次使用Taotoken官方价折扣进行模型测试的成本节省体验

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度初次使用Taotoken官方价折扣进行模型测试的成本节省体验 1. 项目背景与成本挑战最近启动一个新项目，需要集成大模型能…...

编程新知 2026/5/21 11:51:34

Buck电路纹波太大？可能是你的电容和ESR没选对！三种RC场景下的实战分析与选型指南

Buck电路纹波优化实战：电容与ESR选型的三维决策框架实验室里示波器屏幕上那条本该平滑的直流输出波形，此刻却像心电图般剧烈起伏——这是每位电源工程师都经历过的"纹波焦虑"时刻。当我们面对Buck电路输出纹波超标问题时，传统定性…...

编程新知 2026/5/21 11:39:22

从Cityscapes到遥感图像：用MMSegmentation v1.0.0搞定不同领域语义分割数据集的完整配置流程

跨领域语义分割实战：MMSegmentation多场景数据集配置全解析当计算机视觉工程师需要将语义分割技术从自动驾驶领域迁移到遥感图像分析时，最常遇到的障碍不是模型架构的选择，而是数据集的适配难题。不同领域的图像在分辨率、类别分布、标注格式…...

编程新知 2026/5/21 10:25:22

关联查询，左连接，inner join笔记，BNL，NLJ

文章目录left join的最大值和最小值3个表的inner join关联查询时的is_del处理cross join(full join)NLJ 性能高BNL 性能低blj会导致什么问题?left join的最大值和最小值假设左表m条，右表n条最小值是m： 当一条也匹配不到右表时，或者右表中…...

编程新知 2026/5/21 10:23:14

Kernel-Bridge API完全参考手册：从CPU操作到内存管理

Kernel-Bridge API完全参考手册：从CPU操作到内存管理【免费下载链接】Kernel-Bridge Windows kernel hacking framework, driver template, hypervisor and API written on C 项目地址: https://gitcode.com/gh_mirrors/ke/Kernel-Bridge Kernel-Bridge是一…...

编程新知 2026/5/21 9:28:31

5分钟快速上手Mermaid Live Editor：免费在线图表编辑器完全指南

5分钟快速上手Mermaid Live Editor：免费在线图表编辑器完全指南【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid-li…...

编程新知 2026/5/21 8:44:03

Gradiant宣布完成E轮融资，公司估值达20亿美元，助力加快AI、半导体以及工业水务基建领域布局

随着Gradiant依托AI基建和先进制造业务实现业绩大幅增长，新资金将用于支持战略性并购、新一代技术研发以及上市筹备工作 Gradiant今日宣布完成E轮融资，公司估值达到20亿美元。本轮融资由Safar Partners和Hostplus Superannuation Fund领投，C…...

编程新知 2026/5/21 6:53:56

从YOLOv5实战反推：手把手在WSL2里搭建PyTorch 1.12 + CUDA 11.3 环境（附国内镜像加速）

逆向工程视角：在WSL2中构建YOLOv5专属PyTorch 1.12CUDA 11.3开发环境当目标检测项目的截止日期迫在眉睫，却卡在环境配置环节，这种体验对开发者而言无异于噩梦。本文将以结果导向的逆向思维，从YOLOv5的最终运行需求出发&#xff0…...

编程新知 2026/5/21 6:36:48

【成图】

【代码】

END

相关文章：