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

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

news 2025/12/27 15:49:32

【成图】

【代码】

<!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

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用安装包的方式快…...

编程新知 2025/12/22 11:13:26

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2025/12/24 9:59:28

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告（肿瘤大小、血液指标），你需要做出一个**决定性判断**：恶性还是良性？这种“非黑即白”的抉择，正是**逻辑回归（Logistic Regression）** 的战场&a…...

编程新知 2025/10/27 21:25:04

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

测试markdown--肇兴

day1： 1、去程：7:04 --11:32高铁高铁右转上售票大厅2楼，穿过候车厅下一楼，上大巴车 ￥10/人 **2、到达：**12点多到达寨子，买门票，美团/抖音：￥78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/12/15 1:06:25