【Canvas与电脑桌面】用六角回旋镖铺满一个平面（1920*1080）
【成图】
【代码】
<!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…...
创游系列开心娱乐完整组件
别人分享的一套东西，是个不错的娱乐源码，里面包含了很多小游戏。可以创建房间。 没测试自行研究吧，内含搭建教程。 代码免费下载：百度网盘...
高效驱动之选 ——KP85211ASGA 半桥栅极驱动器 内置互锁死区
KP85211A是一款 225V 耐压，具有 1A 拉电流和 1.5A 灌电流能力的半桥栅极驱动器，专用于驱动功率MOSFET或IGBT。采用高压器件工艺技术，具有良好的电流输出及出色的抗瞬态干扰能力。可保证开关节点 VS 瞬态 -7V 情况下系统正常工作。可支持开关节…...
建投数据获批安全生产许可证
9月1日，建投数据成功获批由北京市住房和城乡建设委员会核发的《安全生产许可证》。该资质的获得，是建投数据能力与实力的展现，更是对其企业规模、管理水平、项目业绩等的肯定。 《安全生产许可证》是国家为了加强安全生产监督管理，…...
MCU9.reg52.h的介绍
1.引用头文件的两种方式 #include <reg52.h> #include "reg52.h" 区别:优先搜索的位置不同! 在keil软件中 #include <reg52.h> 优先搜索软件安装的INC文件夹 #include "reg52.h" 优先搜索当前工程文件夹下的头文件,如果没有,则在软件安装的…...
Python知识点：如何使用Python进行二维码生成与识别
在Python中，生成和识别二维码可以使用不同的库来实现。最常用的库包括 qrcode 和 pyzbar。以下是如何使用这些库来生成和识别二维码的示例： 1. 生成二维码 你可以使用 qrcode 库来生成二维码。首先，你需要安装它： pip install …...
跨域问题(CORS)
文章目录 介绍解决一、添加跨域头，允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理 介绍 跨域资源共享（CORS, Cross-Origin Resource Sharing）是浏览器的一个安全机制，用来防止来自一个域的网页对另一个域下的资源进行…...
评测AI写毕业论文软件排行榜前十名的网站
在当今信息爆炸的时代，AI智能写作工具已经成为我们写作过程中的得力助手。特别是对于学术论文的撰写，这些工具不仅能够提高写作效率，还能帮助用户生成高质量的文稿。以下是五款值得推荐的AI智能写论文软件，其中特别推荐千笔-AIPas…...
发邮件格式
邮件作为一种正式的沟通方式，其格式通常需要遵循一定的规范。 尊敬的xx：(无缩进) 您好！(缩进两个字符) 正文(缩进两个字符)xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xxx正文xx…...
解锁Web3.0——Scaffold-eth打造以太坊DApp的终极指南
🚀本系列文章为个人学习笔记，目的是巩固知识并记录我的学习过程及理解。文笔和排版可能拙劣，望见谅。 目录 前言 一、快速部署 1、前期准备： 2、安装项目： 二、配置部署运行环境 1、初始化本地链：…...
机器学习之监督学习(四)决策树和随机森林
机器学习之监督学习（四）决策树和随机森林 0. 文章传送1. 决策树 Decision Tree案例引入构建过程 2. 随机森林 Random Forest3. 决策树 vs 神经网络4. 代码实现手写版本sklearn版本 5. 案例Iris数据集介绍实验代码 0. 文章传送 机器学习之监督学习&#…...
Sky Takeaway
软件开发整体介绍 软件开发流程 角色分工 软件环境 苍穹外卖 项目介绍 定位：专门为餐饮企业定制的一款软件产品 技术选型 前端环境搭建 阅读readme文档 nginx.exe放入无中文目录运行并启动 后端环境搭建 项目结构 Nginx反向代理 优点 配置 Nginx反向代理 负…...
JavaScript 模板字符串
模板字符串（Template Literals）是 JavaScript ES6 引入的一项功能，它让字符串的处理变得更加灵活和直观。以下是对模板字符串的详细介绍，包括它的基本特性、用法以及一些高级用法。 一 基本特性 1. 多行字符串 模板字符串允许创…...
模拟new关键字时产生的问题，求解答！
目的：编写函数myNew来模拟new关键字 首先，我们知道new关键字的工作： 1.产生一个新对象 2.将新对象的__proto__属性指向构造函数的prototype属性 3.将新对象赋值给构造函数的this 4.执行构造函数中的代码 函数实现如下： fun…...
SpringBoot2：请求处理原理分析-接口参数解析原理(argumentResolvers)
一、知识回顾 我们知道，接口的参数，一般都要配上注解来一起使用。 不同的参数注解，决定了传参的方式不同。 为什么会这样？ 如果让你设计接口参数解析，你会怎么做？ 首先，我们知道方法参数是形…...
java实现文本相似度计算
需求 **文本推荐：**有多个文本字符串，如何设计一个简单的统计方法（从词频的角度设计），来计算出多个文本字符串两两之间的相似度，并输出大于指定相似度阈值的文本 分析理解 使用Java实现文本相似度计算的…...
基于无人机边沿相关 ------- IBUS、SBUS协议和PPM信号
文章目录 一、IBUS协议二、SBUS协议三、PPM信号 一、IBUS协议 IBUS（Intelligent Bus）是一种用于电子设备之间通信的协议，采用串行通信方式，允许多设备通过单一数据线通信，较低延迟，支持多主机和从机结构&a…...
django学习入门系列之第十点《A 案例： 员工管理系统4》
文章目录 6 部门管理（原始方式）6.6 添加界面的导入（数据库）6.7 删除按键的应用6.8 编辑按键的应用6.81 传值的另一种方式 6.9 提交按键的应用 往期回顾 6 部门管理（原始方式） 6.6 添加界面的导入ÿ…...
【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 摘要…...
[苍穹外卖]-08微信支付详解
地址簿管理 分析需求: 查询地址列表/新增地址/修改地址/删除地址/设置默认地址/查询默认地址 接口设计 新增地址接口 查询用户所有的地址接口 查询默认地址接口 根据id修改地址接口 根据id删除地址接口 根据id查询地址接口 设置默认地址接口 数据库设计: 收货地址簿(address_…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
R语言AI模型部署方案：精准离线运行详解
R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题： 指定音频引擎与设备；播放音频文件 本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生，小白用户，想学习知识的 有点基础，想要通过项…...
解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist
现象： android studio报错： [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决： 不要动CMakeLists.…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
链式法则中 复合函数的推导路径 多变量“信息传递路径”
非常好，我们将之前关于偏导数链式法则中不能“约掉”偏导符号的问题，统一使用 二重复合函数： z f ( u ( x , y ) , v ( x , y ) ) \boxed{z f(u(x,y),\ v(x,y))} zf(u(x,y), v(x,y)) 来全面说明。我们会展示其全微分形式（偏导…...